/* ============================================================================
   FINNWOOD — "RETRO" THEME  (circa 2006–2010 small-business website)
   ----------------------------------------------------------------------------
   This is a complete, standalone alternative stylesheet. It is toggled on by the
   "Retro mode" button in the footer, which disables the modern stylesheet
   (app.css) and enables this one. The page markup is identical — only the look
   changes. Think boxed table-style panels, bevelled buttons, blue underlined
   links, Times headings and a tiled desktop background. Purely for fun. :)
   ============================================================================ */

* { box-sizing: border-box; }

html {
    background-color: #3d6b22;
    background-image:
        repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 6px, rgba(255,255,255,.05) 6px 12px);
}

body {
    max-width: 1000px;
    margin: 0 auto;
    background: #ffffff;
    color: #222222;
    font-family: Verdana, Geneva, Tahoma, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    border-left: 3px solid #1f3d12;
    border-right: 3px solid #1f3d12;
    box-shadow: 0 0 24px rgba(0,0,0,.45);
    min-height: 100vh;
}

/* ---------- links: the classic blue / purple / red ---------- */
a { color: #0000cc; text-decoration: underline; }
a:visited { color: #551a8b; }
a:hover { color: #cc0000; background: #ffffcc; }

/* ---------- headings: Times, with a ruled underline ---------- */
h1, h2, h3, h4 { font-family: "Times New Roman", Georgia, serif; color: #1f3d12; margin: 0 0 .5em; line-height: 1.2; font-weight: 700; }
h1 { font-size: 30px; }
h2 { font-size: 24px; border-bottom: 2px solid #6aa12f; padding-bottom: 3px; }
h3 { font-size: 18px; }
h4 { font-size: 15px; }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; border: 0; }
strong, b { color: #143b0c; }
hr { border: 0; border-top: 1px dashed #aaa; }

/* ---------- layout: one continuous "page", banded sections ---------- */
.container, .container.wide { width: 100%; max-width: none; margin: 0; padding: 12px 20px; }
.section { padding: 16px 0; border-bottom: 1px dashed #cdcdcd; }
.section.tight { padding: 10px 0; }
.wide, .center { } /* no-ops in retro */
.section-head { margin-bottom: 12px; }
.section-head.center, .eyebrow-row { text-align: left; }
.eyebrow-row { display: block; }

.eyebrow {
    display: block; font-weight: bold; font-size: 11px; letter-spacing: 1px;
    text-transform: uppercase; color: #3d6b22; margin-bottom: 6px;
}
.eyebrow.on-dark, .eyebrow.brass { color: #3d6b22; }
.lede { font-size: 14px; color: #333; }
.text-mono { font-family: "Courier New", Courier, monospace; }

/* ---------- header & navigation: light panel + text nav with separators ---------- */
.site-header {
    position: static; z-index: auto;
    background: linear-gradient(#eaf4d6, #c9e09a);
    backdrop-filter: none;
    border-bottom: 3px ridge #6aa12f;
}
.nav { display: block; height: auto; padding: 10px 16px 0; }
.nav__brand { display: block; margin-bottom: 8px; }

.nav__toggle, .nav__burger, .nav__caret, .nav__panel { display: none !important; }

.nav__links {
    display: block; position: static; transform: none; background: transparent;
    margin: 0; padding: 6px 0 0; border-top: 1px solid #9cbf6a; text-align: center; overflow: visible;
}
.nav__item { display: inline-block; position: static; }
.nav__item:not(:last-child)::after { content: "|"; color: #6aa12f; margin: 0 4px; }
.nav__link {
    display: inline-block; padding: 4px 6px; border-radius: 0; background: transparent;
    color: #0000cc; font-weight: bold; font-size: 13px; text-decoration: underline;
}
.nav__link:hover { color: #cc0000; background: #ffffcc; }
.nav__link.active { color: #1f3d12; text-decoration: none; }

.nav__cta { display: block; text-align: center; padding: 8px 0 12px; }
.nav__phone { display: inline-block; font-family: "Courier New", monospace; font-weight: bold; color: #1f3d12; margin: 0 8px; }
.nav__phone svg { display: none; }
.nav__mobcta { display: none; }

/* ---------- bevelled buttons (the Web 2.0 glossy look) ---------- */
.btn {
    display: inline-block; padding: 5px 14px; margin: 2px; cursor: pointer;
    font-family: Verdana, Arial, sans-serif; font-weight: bold; font-size: 12px;
    text-decoration: none; border-radius: 0; box-shadow: none; transform: none;
    border: 2px outset #cfcfcf; background: linear-gradient(#fbfbfb, #d9d9d9); color: #111;
}
.btn:hover { background: linear-gradient(#ffffff, #e6e6e6); color: #000; transform: none; text-decoration: none; }
.btn:active { border-style: inset; }
.btn svg { width: 1em; height: 1em; vertical-align: -2px; }
.btn-lg { padding: 7px 18px; font-size: 13px; }
.btn-block { display: block; width: 100%; text-align: center; }

.btn-primary { border-color: #8fbf4a; background: linear-gradient(#aede64, #79ab37); color: #11300a; }
.btn-primary:hover { background: linear-gradient(#bdec76, #88bb45); color: #11300a; }
.btn-dark { border-color: #777; background: linear-gradient(#5a5a5a, #2f2f2f); color: #fff; }
.btn-dark:hover { background: linear-gradient(#6c6c6c, #3a3a3a); color: #fff; }
.btn-brass { border-color: #d8b34d; background: linear-gradient(#f1d489, #cda13a); color: #3a2a06; }
.btn-brass:hover { background: linear-gradient(#f8e2a4, #d8ad44); color: #3a2a06; }
.btn-ghost, .btn-ghost.on-dark { border-color: #bdbdbd; background: linear-gradient(#fafafa, #e2e2e2); color: #123; }
.btn-ghost:hover, .btn-ghost.on-dark:hover { background: linear-gradient(#ffffff, #ececec); color: #000; }
.nav__support { font-size: 12px; }
.nav__support svg { color: #3d6b22; }

/* ---------- generic bordered "panels" for cards, quotes, steps ---------- */
.card, .media-card, .quote, .step, .contact-info {
    border: 2px ridge #9cbf6a; background: #f6faee; padding: 12px; border-radius: 0; box-shadow: none;
}
.card.brass-accent { border-color: #d8b34d; background: #fbf4e1; }
.svc__ico { display: inline-block; color: #3d6b22; margin-bottom: 6px; }
.svc__ico svg { width: 28px; height: 28px; }
.card.brass-accent .svc__ico { color: #b8860b; }
.card h3, .path h3 { border: 0; }
.card__link, .textlink { color: #0000cc; font-weight: bold; }
.card__link svg, .textlink svg { width: 1em; height: 1em; vertical-align: -2px; }

/* ---------- grids: tile into columns like an old table ---------- */
.grid { font-size: 0; margin: 0 -1%; }
.grid > * { font-size: 13px; }
.grid-2 > *, .grid-3 > *, .grid-4 > * { display: inline-block; vertical-align: top; margin: 1%; }
.grid-2 > * { width: 48%; }
.grid-3 > * { width: 31.33%; }
.grid-4 > * { width: 23%; }

/* ---------- hero ---------- */
.hero { background: #eef6e0; border-bottom: 3px ridge #9cbf6a; padding: 0; }
.hero__grain { display: none; }
.hero__inner { display: block; }
.hero h1 { font-size: 30px; }
.hero h1 em { font-style: italic; color: #3d6b22; }
.hero__cta { margin: 10px 0; }
.hero__trust { border-top: 1px dashed #bcbcbc; padding-top: 8px; margin-top: 10px; }
.hero__trust .it { display: inline-block; margin-right: 16px; font-size: 12px; color: #333; }
.hero__trust .it svg { width: 1em; height: 1em; color: #3d6b22; vertical-align: -2px; }
.hero__art { margin-top: 12px; border: 3px ridge #9cbf6a; background: #fff; padding: 4px; }
.hero__art img { display: block; }
.hero__chip { display: inline-block; margin-top: 6px; border: 1px solid #6aa12f; background: #ffffe0; padding: 2px 8px; font-family: "Courier New", monospace; font-weight: bold; font-size: 11px; }
.hero__chip svg { width: 1em; height: 1em; vertical-align: -2px; color: #3d6b22; }
/* legacy hero panel, if present */
.hero__panel { border: 2px ridge #9cbf6a; background: #f6faee; padding: 10px; }
.hero__rows { margin-top: 8px; }
.hero__row { border-bottom: 1px dotted #bbb; padding: 4px 0; }
.hero__row .val { float: right; font-family: "Courier New", monospace; font-weight: bold; }

/* ---------- stat band ---------- */
.statband { background: #f6faee; }
.statband__grid { display: block; font-size: 0; text-align: center; border: 0; }
.stat { display: inline-block; width: 24%; font-size: 13px; border: 2px ridge #9cbf6a; background: #fff; padding: 10px 4px; vertical-align: top; margin: 0; }
.stat__num { font-family: "Times New Roman", serif; font-size: 28px; font-weight: bold; color: #3d6b22; }
.stat__num span { color: #6aa12f; }
.stat__lab { font-size: 10px; text-transform: uppercase; color: #555; letter-spacing: 1px; margin-top: 4px; }

/* ---------- two paths ---------- */
.paths { padding: 4px 0; }
.paths__grid { display: block; font-size: 0; }
.path { display: inline-block; width: 48%; vertical-align: top; margin: 1%; border: 3px ridge #9cbf6a; background: #f6faee; padding: 14px; font-size: 13px; }
.path--owned { border-color: #d8b34d; background: #fbf4e1; }
.path__tag { display: inline-block; border: 1px solid #6aa12f; background: #eaf4d6; padding: 2px 8px; font-weight: bold; font-size: 11px; text-transform: uppercase; }
.path--owned .path__tag { border-color: #d8b34d; background: #f6ecd0; }
.path__price { font-family: "Courier New", monospace; font-weight: bold; color: #3d6b22; margin: 6px 0; }
.path--owned .path__price { color: #b8860b; }
.paths__fork { position: static; display: block; width: auto; height: auto; text-align: center; font-weight: bold; color: #888; margin: 8px 0; background: transparent; border: 0; }

/* ---------- feature lists ---------- */
.feature-list, ul.feature-list { list-style: none; padding-left: 0; margin: 8px 0; }
.feature-list li, .feature-list.on-dark li, .feature-list.brass li { padding: 3px 0; color: #222; }
.feature-list li svg { width: 1em; height: 1em; color: #3d6b22; vertical-align: -2px; margin-right: 4px; }
.feature-list.brass li svg { color: #b8860b; }

/* ---------- split sections ---------- */
.split { display: block; }
.split__copy, .split__media { display: block; margin-bottom: 12px; }
.figure { background: #163; padding: 8px; }
.figure.brass { background: #432; }

/* ---------- photos ---------- */
.photo { position: static; border: 3px ridge #9cbf6a; background: #fff; padding: 4px; border-radius: 0; box-shadow: none; }
.photo img { display: block; width: 100%; height: auto; }
.photo__cap { position: static; display: block; background: #1f3d12; color: #fff; padding: 3px 6px; font-family: "Courier New", monospace; font-size: 11px; letter-spacing: 0; text-transform: none; }
.photo-grid { font-size: 0; }
.photo-grid > * { display: inline-block; width: 32%; margin: .66%; vertical-align: top; }

/* ---------- steps ---------- */
.steps { display: block; font-size: 0; }
.step { display: inline-block; width: 23%; margin: 1%; vertical-align: top; font-size: 13px; }
.step__n { font-family: "Courier New", monospace; font-weight: bold; color: #b8860b; font-size: 12px; }

/* ---------- FAQ ---------- */
.faq { margin-top: 10px; }
.faq details { border: 1px solid #9cbf6a; background: #fff; margin-bottom: 6px; padding: 6px 10px; }
.faq summary { cursor: pointer; font-weight: bold; color: #1f3d12; font-family: "Times New Roman", serif; font-size: 15px; }

/* ---------- testimonials ---------- */
.quote { background: #fffef0; }
.quote__mark { font-family: "Times New Roman", serif; font-size: 40px; color: #9cbf6a; line-height: .6; }
.quote blockquote { margin: 0; font-style: italic; }
.quote__who { margin-top: 8px; }
.quote__av { display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; background: #3d6b22; color: #fff; font-weight: bold; border-radius: 0; margin-right: 6px; vertical-align: middle; }
.quote__n { font-weight: bold; color: #1f3d12; }
.quote__r { color: #555; font-size: 12px; }

/* ---------- client logos ---------- */
.logos { text-align: center; }
.logo-chip { display: inline-block; border: 1px solid #999; background: #eee; padding: 4px 10px; margin: 3px; font-weight: bold; font-size: 12px; border-radius: 0; color: #333; }

/* ---------- CTA band ---------- */
.ctaband { background: linear-gradient(#6aa12f, #3d6b22); color: #fff; border: 3px ridge #8fbf4a; border-radius: 0; padding: 16px; }
.ctaband h2 { color: #fff; border: 0; }
.ctaband .lede { color: #eaffd8; }
.ctaband__row { display: block; }
.ctaband__actions { margin-top: 10px; }

/* ---------- page hero (sub pages) ---------- */
.pagehero { background: #eef6e0; border-bottom: 2px ridge #9cbf6a; padding: 10px 0; }
.pagehero.brass { background: #f6ecd0; }
.pagehero h1 { font-size: 26px; }
.breadcrumb { font-family: "Courier New", monospace; font-size: 11px; color: #555; margin-bottom: 8px; }

/* ---------- contact form ---------- */
.contact-grid { display: block; }
.contact-info .row { display: block; padding: 4px 0; border-bottom: 1px dotted #ccc; }
.contact-info .ico { display: inline-block; color: #3d6b22; margin-right: 6px; vertical-align: middle; }
.contact-info .t { font-weight: bold; color: #1f3d12; }
.field { margin-bottom: 10px; }
.field label { display: block; font-weight: bold; color: #1f3d12; margin-bottom: 3px; }
.field input, .field select, .field textarea, input, select, textarea {
    font-family: Verdana, Arial, sans-serif; font-size: 13px; padding: 4px;
    border: 2px inset #cccccc; border-radius: 0; background: #fff; width: 100%; max-width: 420px;
}
.field textarea { max-width: 100%; }
.form-note { font-size: 11px; color: #666; }
.val-msg { color: #cc0000; font-size: 11px; }
.pill { display: inline-block; border: 1px solid #6aa12f; background: #eaf4d6; padding: 1px 6px; font-size: 11px; color: #1f3d12; }

/* ---------- map ---------- */
.fw-map { height: 380px; width: 100%; border: 2px inset #999; border-radius: 0; box-shadow: none; background: #cde0b6; }

/* ---------- Field Notes (blog) ---------- */
.container--narrow { max-width: none; }
.flip { transform: scaleX(-1); }
.post-list { display: block; }
.post-card { display: block; border: 2px ridge #9cbf6a; background: #f6faee; padding: 12px; border-radius: 0; box-shadow: none; margin-bottom: 12px; }
.post-card__meta { font-family: "Courier New", monospace; font-size: 11px; color: #555; }
.post-card__meta span { margin: 0 3px; }
.post-card__title { font-family: "Times New Roman", serif; font-size: 18px; margin: 4px 0; border: 0; }
.post-card__title a { color: #0000cc; }
.post-card__excerpt { color: #333; }
.post-card__foot { margin-top: 8px; }
.tags { display: inline; }
.tag { display: inline-block; border: 1px solid #6aa12f; background: #eaf4d6; color: #1f3d12; padding: 1px 6px; margin: 2px; font-size: 11px; border-radius: 0; font-family: "Courier New", monospace; }
.article { font-family: Verdana, Arial, sans-serif; font-size: 14px; line-height: 1.6; }
.article__lead { font-weight: bold; }
.article h2 { font-size: 20px; margin: 18px 0 8px; }
.article h3 { font-size: 16px; margin: 14px 0 6px; }
.article a { color: #0000cc; }
.article blockquote { border-left: 4px solid #6aa12f; background: #fffef0; margin: 14px 0; padding: 8px 14px; font-style: italic; }
.article__title { font-size: 24px; }
.article__byline { margin-top: 12px; }
.article__av { display: inline-block; width: 34px; height: 34px; line-height: 34px; text-align: center; background: #3d6b22; color: #fff; font-weight: bold; border-radius: 0; vertical-align: middle; margin-right: 6px; }
.article__author { font-weight: bold; color: #1f3d12; }
.article__date { font-family: "Courier New", monospace; font-size: 12px; color: #555; }
.article__back { border-top: 1px dashed #aaa; margin-top: 16px; padding-top: 10px; }
.post-feature { display: block; border: 2px ridge #9cbf6a; background: #f6faee; }
.post-feature__body { padding: 12px; }
.post-feature__img img { width: 100%; height: auto; display: block; }
.post-feature__title { font-family: "Times New Roman", serif; font-size: 20px; }
.post-feature__title a { color: #0000cc; }

/* ---------- footer: green panel + period badges ---------- */
.footer { background: linear-gradient(#3d6b22, #28491400); background-color: #2f5417; color: #e6f3d6; border-top: 3px ridge #6aa12f; }
.footer a { color: #cfe9a8; }
.footer a:hover { color: #fff; background: transparent; }
.footer h4 { color: #fff; font-size: 13px; border-bottom: 1px solid #6aa12f; padding-bottom: 2px; }
.footer__top { display: block; }
.footer__col { display: inline-block; vertical-align: top; width: 24%; margin: 1% 0; min-width: 160px; }
.footer__brand { display: block; margin-bottom: 10px; }
.footer__bottom { border-top: 1px solid #6aa12f; margin-top: 10px; padding-top: 8px; font-size: 11px; text-align: center; }
.footer__bottom span { display: block; }
.footer__bottom::before {
    content: "✦ You are visitor number 000847 ✦";
    display: block; margin: 6px auto; padding: 3px 8px; width: 240px;
    background: #000; color: #39ff14; font-family: "Courier New", monospace; letter-spacing: 2px; border: 2px ridge #444;
}
.footer__bottom::after {
    content: "[ Valid XHTML 1.0 ]   [ Valid CSS! ]   •   Best viewed at 1024×768 in Internet Explorer 6";
    display: block; margin-top: 8px; color: #bcd9a0; font-size: 10px;
}

/* ---------- the theme toggle button itself ---------- */
.fw-theme-toggle {
    display: inline-block; margin-top: 10px; cursor: pointer;
    font-family: Verdana, Arial, sans-serif; font-weight: bold; font-size: 12px;
    border: 2px outset #cfcfcf; background: linear-gradient(#fbfbfb, #d4d4d4); color: #111;
    padding: 4px 12px; border-radius: 0;
}
.fw-theme-toggle:active { border-style: inset; }

/* ---------- marquee strip (because of course) ---------- */
.site-header::after {
    content: "★  W E L C O M E   T O   F I N N W O O D   I T  —  Y O R K S H I R E ' S   F R I E N D L Y   I T   S U P P O R T  ★  ";
    display: block; white-space: nowrap; overflow: hidden;
    background: #1f3d12; color: #ffe600; font-family: "Courier New", monospace; font-weight: bold;
    font-size: 12px; padding: 3px 0; letter-spacing: 1px;
    animation: fw-marquee 22s linear infinite;
}
@keyframes fw-marquee { from { text-indent: 100%; } to { text-indent: -260%; } }

/* ---------- misc utilities the markup uses ---------- */
.mt-1 { margin-top: 6px; } .mt-2 { margin-top: 10px; } .mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 22px; } .mt-6 { margin-top: 30px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 10px; }
.on-dark { color: inherit; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; background: #ffffcc; border: 2px solid #1f3d12; padding: 4px 8px; z-index: 999; }

/* validation / error bits that normally live in app.css */
.validation-message, .validation-summary-errors { color: #cc0000; font-size: 12px; }
#blazor-error-ui { background: #ffffcc; }

/* small screens: stop the tiling so it stays readable */
@media (max-width: 760px) {
    .grid-2 > *, .grid-3 > *, .grid-4 > *, .path, .stat, .step, .photo-grid > *, .footer__col { display: block; width: auto; margin: 0 0 10px; }
    body { border-left: 0; border-right: 0; }
}