/* 04-public.css: composition for the public marketing pages that is shared by
   more than one page. Single-page styling lives in css/pages/*.css, linked at
   the top of that page. */

/* ---------- shared photo hero ---------- */

.photo-hero {
    position: relative;
    background: var(--ink-900);
    color: var(--white);
    overflow: hidden;
}

.photo-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .38;
}

.photo-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 20, 20, .72) 0%, rgba(20, 20, 20, .55) 45%, rgba(20, 20, 20, .88) 100%);
}

/* Sits on a .container element: top and bottom only, never a shorthand,
   or the container's horizontal gutter disappears on phones. */
.photo-hero-inner {
    position: relative;
    z-index: 2;
    padding-top: 52px;
    padding-bottom: 46px;
}

@media (min-width: 768px) {
    .photo-hero-inner {
        padding-top: 90px;
        padding-bottom: 78px;
    }
}

.photo-hero h1 {
    color: var(--white);
    max-width: 24ch;
}

.photo-hero-sub {
    color: var(--stone-200);
    font-size: 1.12rem;
    max-width: 56ch;
    margin-top: 16px;
}

/* ---------- intro / body prose ---------- */

/* A section that is a bare .container with no .prose wrapper gets no paragraph
   margin at all, so two paragraphs render flush against each other and read as
   one block (the "Paying for it" section on /pricing). Everything on the site
   uses the same 16px rhythm between paragraphs. */
.section > .container > p + p {
    margin-top: 16px;
}

.prose > p {
    margin-bottom: 16px;
    /* Keep the reading measure sane in the wide left column. */
    max-width: 68ch;
}

.prose > h2 {
    margin-top: 34px;
}

.prose > h3 {
    margin-top: 26px;
    margin-bottom: 8px;
}

.prose > ul,
.prose > ol {
    margin: 0 0 18px 22px;
}

.prose > ul li,
.prose > ol li {
    margin-bottom: 8px;
    max-width: 66ch;
}

.prose-lead {
    font-size: 1.12rem;
    color: var(--stone-700);
    margin-bottom: 22px;
    max-width: 70ch;
}

/* ---------- service + town detail pages ---------- */

.detail-block {
    margin-bottom: 34px;
}

.detail-block:last-child {
    margin-bottom: 0;
}

.service-nav-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.town-section {
    margin-bottom: 28px;
}

.town-section h2 {
    font-size: 1.35rem;
    margin-bottom: 10px;
}

.town-section p {
    margin-bottom: 16px;
    max-width: 68ch;
}

.town-section p:last-child {
    margin-bottom: 0;
}

.town-facts {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin: 22px 0;
}

.town-fact {
    background: var(--off-white);
    border: 1px solid var(--stone-200);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
}

.town-fact dt {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.74rem;
    color: var(--bark-600);
    margin-bottom: 4px;
}

.town-fact dd {
    margin: 0;
    color: var(--ink-900);
    font-weight: 600;
}

/* ---------- service area hub ---------- */

.town-column-list {
    columns: 2;
    column-gap: 28px;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 860px) {
    .town-column-list {
        columns: 3;
    }
}

.town-column-list li {
    break-inside: avoid;
}

.town-column-list a {
    display: block;
    padding: 9px 0;
    min-height: var(--tap);
    border-bottom: 1px solid var(--stone-200);
    color: var(--ink-900);
}

.town-column-list a:hover {
    color: var(--green-800);
}

.town-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--white);
    border: 1px solid var(--stone-200);
    border-left: 4px solid var(--leaf-500);
    border-radius: var(--radius-sm);
    padding: 18px 20px;
    height: 100%;
}

.town-card h3 {
    text-transform: none;
    font-size: 1.1rem;
}

.town-card-meta {
    font-size: 0.84rem;
    color: var(--stone-600);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---------- mini estimate form ---------- */

.mini-quote {
    background: var(--white);
    border: 1px solid var(--stone-200);
    border-top: 5px solid var(--green-700);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 24px;
}

.mini-quote-title {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.mini-quote-sub {
    font-size: 0.94rem;
    color: var(--stone-600);
    margin-bottom: 16px;
}

.quote-promise {
    font-size: 0.86rem;
    color: var(--stone-600);
    margin-top: 10px;
    text-align: center;
}

/* Shown while the Blazor circuit is not up, and inside <noscript>. The submit
   button posts over that circuit, so without it the button cannot do anything;
   this says so and puts the phone number in reach (SEO-19). */
.form-offline {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--stone-200);
    border-left: 4px solid var(--brown-700, #6B4423);
    border-radius: var(--radius-sm);
    background: var(--off-white);
    font-size: 0.88rem;
    color: var(--stone-600);
}

/* ---------- contact page ---------- */

.contact-actions {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
    .contact-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.hours-table td:first-child {
    font-weight: 600;
    color: var(--ink-900);
    white-space: nowrap;
}

.hours-table td:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------- legal pages ---------- */

.legal-page h2 {
    font-size: 1.25rem;
    margin-top: 30px;
    margin-bottom: 8px;
}

.legal-page p,
.legal-page li {
    color: var(--stone-700);
}

.legal-page ul {
    margin: 0 0 16px 22px;
}

.legal-updated {
    color: var(--stone-600);
    font-size: 0.9rem;
}

/* ---------- 404 ---------- */

.notfound-code {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--leaf-500);
    margin-bottom: 6px;
}

/* ---------- teaser rows ---------- */

.teaser-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}

.teaser-head .section-heading {
    margin-bottom: 0;
}

.teaser-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

/* ---------- article teaser cards (Learn) ---------- */

.article-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--white);
    border: 1px solid var(--stone-200);
    border-radius: var(--radius);
    padding: 20px;
    height: 100%;
}

.article-card h3 {
    text-transform: none;
    font-size: 1.08rem;
}

.article-card-meta {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--stone-600);
}

/* ---------- full estimate form ---------- */

.estimate-form {
    scroll-margin-top: 140px;
}

.estimate-form-title {
    font-size: 1.5rem;
    margin-bottom: 6px;
}

.fieldset-plain {
    border: 0;
    padding: 0;
    margin: 0 0 16px;
}

.fieldset-plain .form-legend {
    padding: 0;
    margin-bottom: 4px;
}

.radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 22px;
}

.photo-previews {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.photo-preview {
    width: 96px;
    text-align: center;
}

.photo-preview img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--stone-200);
}

.photo-remove {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 6px 0;
    min-height: 32px;
    border: 0;
    background: none;
    color: var(--green-800);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.estimate-success {
    text-align: center;
    padding: 12px 0;
}

.estimate-success-mark {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--green-100);
    color: var(--green-800);
    display: flex;
    align-items: center;
    justify-content: center;
}

.estimate-success-title {
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.estimate-success .hero-ctas {
    justify-content: center;
}

/* ---------- pricing tables ---------- */

.price-table-block {
    margin-bottom: 44px;
    scroll-margin-top: 140px;
}

.price-table-block:last-child {
    margin-bottom: 0;
}

.price-detail {
    display: block;
    font-weight: 400;
    font-size: 0.86rem;
    color: var(--stone-600);
    margin-top: 3px;
}

.data-table th[scope="row"] {
    font-weight: 600;
    color: var(--ink-900);
}

/* ---------- sidebar link list ---------- */

.side-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-links li {
    border-bottom: 1px solid var(--stone-200);
}

.side-links li:last-child {
    border-bottom: 0;
}

.side-links a {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    color: var(--ink-900);
    font-size: 0.95rem;
}

.side-links a:hover {
    color: var(--green-800);
}

/* ---------- about page ---------- */

.about-photo {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--stone-200);
    margin: 26px 0;
}

.contact-nap {
    font-style: normal;
    font-size: 1.05rem;
    line-height: 1.8;
}

.contact-nap strong {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 1.15rem;
    color: var(--ink-900);
}

/* ---------- town page photographs ----------
   Real job photos on the town pages (SEO-9). The frame is the .gallery-grid /
   .gallery-item pair from 03-components.css; only the block spacing and the
   heading are new here. */

.town-photos {
    margin: 30px 0 6px;
}

.town-photos h2 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 1.25rem;
    color: var(--ink-900);
    margin: 0 0 14px;
}

.town-photos .gallery-item figcaption .muted {
    display: block;
    font-size: 0.82rem;
}