/* pages.css — styles for content/landing pages.
   Loaded IN ADDITION to styles.css. Never modifies the home page. */

.page-hero {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-light));
    color: #fff;
    padding: 3.2rem 0 2.6rem;
}

.page-hero h1 {
    margin: 0 0 .5em;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    line-height: 1.25;
}

.page-hero .page-lead {
    margin: 0 0 1.6rem;
    max-width: 60ch;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .92);
}

.page-hero .hero-cta { margin-bottom: .6rem; }

/* Breadcrumb */
.breadcrumb {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    font-size: .92rem;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
    margin: 0;
    padding: .75rem 0;
    color: var(--color-text-muted);
}

.breadcrumb li::after {
    content: "‹";
    margin-inline-start: .4rem;
    color: var(--color-border);
}

.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--color-primary); }

/* Prose */
.prose { padding: 3rem 0; }
.prose-inner { max-width: 78ch; }

.prose h2 {
    margin: 2.2rem 0 .6em;
    color: var(--color-primary);
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
}

.prose h3 {
    margin: 1.6rem 0 .4em;
    font-size: 1.12rem;
}

.prose p, .prose li { color: var(--color-text); }
.prose ul, .prose ol { padding-inline-start: 1.3rem; }
.prose li { margin-bottom: .45em; }
.prose strong { color: var(--color-primary-dark); }

/* Callout */
.callout {
    border-inline-start: 5px solid var(--color-primary);
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    margin: 1.8rem 0;
}

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

/* Price table */
.price-table-wrap { overflow-x: auto; margin: 1.5rem 0; }

.price-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 480px;
}

.price-table th, .price-table td {
    padding: .8rem .9rem;
    text-align: start;
    border-bottom: 1px solid var(--color-border);
}

.price-table thead th {
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
}

.price-table tbody tr:nth-child(even) { background: var(--color-surface); }
.price-table .price-cell { font-weight: 700; color: var(--color-primary-dark); white-space: nowrap; }

/* FAQ */
.faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: .75rem;
    background: #fff;
    overflow: hidden;
}

.faq-item summary {
    cursor: pointer;
    padding: 1rem 1.15rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    list-style: none;
    position: relative;
    padding-inline-end: 2.6rem;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: "+";
    position: absolute;
    inset-inline-end: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-primary);
}

.faq-item[open] summary::after { content: "−"; }
.faq-item summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.faq-item .faq-body { padding: 0 1.15rem 1.1rem; color: var(--color-text-muted); }
.faq-item .faq-body p:last-child { margin-bottom: 0; }

/* Link cards (hub + related) */
.link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.1rem;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}

.link-card {
    display: block;
    padding: 1.3rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
    height: 100%;
}

.link-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.link-card h3 { margin: 0 0 .35em; color: var(--color-primary); font-size: 1.08rem; }
.link-card p { margin: 0; color: var(--color-text-muted); font-size: .95rem; }

/* City chips */
.city-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    list-style: none;
    padding: 0;
    margin: 1.2rem 0 0;
}

.city-chips a {
    display: inline-block;
    padding: .45rem .95rem;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-primary-dark);
    font-size: .95rem;
}

.city-chips a:hover { background: var(--color-primary); color: #fff; text-decoration: none; }

/* CTA band */
.cta-band {
    background: var(--color-primary);
    color: #fff;
    padding: 2.8rem 0;
    text-align: center;
}

.cta-band h2 { margin: 0 0 .4em; color: #fff; }
.cta-band p { margin: 0 0 1.4rem; color: rgba(255, 255, 255, .9); }

.cta-band .hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    justify-content: center;
}

/* Section on light surface */
.section-alt { background: var(--color-surface); padding: 3rem 0; }
.section-alt h2 { margin-top: 0; color: var(--color-primary); }

@media (max-width: 600px) {
    .page-hero { padding: 2.4rem 0 2rem; }
    .prose { padding: 2.2rem 0; }
}

/* High-contrast / a11y overrides inherited from styles.css */
body.high-contrast .link-card,
body.high-contrast .faq-item,
body.high-contrast .callout {
    background: #000;
    border-color: #fff;
    color: #fff;
}

body.high-contrast .link-card h3,
body.high-contrast .faq-item summary,
body.high-contrast .price-table .price-cell { color: #ffbf00; }