/*
 * ============================================================================
 * Copyright (c) 2026 ATH SOLUTIONS (PTY) LTD. All rights reserved.
 * KwaZulu-Natal, Republic of South Africa.
 * ============================================================================
 *
 * @BEGIN Developer Log Header Block
 * @FILENAME: brochure.css
 * @TITLE: EDMP
 * @DESCRIPTION: Public-facing brochure layout CSS - navigation, hero sections, feature cards, pricing plans, timeline, persona grid, and responsive breakpoints.
 * @AUTHOR: Ary van der Pijl
 * @COMPANY: ATH SOLUTIONS (PTY) LTD
 * @WEBSITE: https://www.ath.solutions/
 * @EMAIL: info@ath.solutions
 * @COPYRIGHT: All Rights Reserved
 * @LICENSE: ATH SOLUTIONS - PROPRIETARY SOFTWARE LICENCE AGREEMENT (https://www.ath.solutions/documents/ath_solutions_software_licence_agreement.pdf)
 *
 * BEGIN CHANGELOG
 * @IMPORTANT NOTICE: Developers working on these files MUST update and maintain the Developers Change Log, failure to do is not an option:
 * !==================================================================================================================================================================
 * VERSION 1.0.0
 * + File Created | Ary van der Pijl | 2026-07-02
 * ==================================================================================================================================================================!
 * END CHANGELOG
 */

/* ── Base ─────────────────────────────────────────────────────────────── */
.brochure-page { margin: 0; background: #fff; font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif); }

/* ── Navigation ───────────────────────────────────────────────────────── */
.brochure-nav { background: #1e293b; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 64px; position: sticky; top: 0; z-index: 100; }
.brochure-nav .brand { color: #fff; font-weight: 700; font-size: 1.25rem; text-decoration: none; }
.brochure-nav .nav-links a { color: #cbd5e1; text-decoration: none; margin-left: 1.25rem; font-size: .875rem; transition: color .15s; }
.brochure-nav .nav-links a:hover { color: #fff; }

/* ── Legal pages - narrow body ────────────────────────────────────────── */
.brochure-body { max-width: 800px; margin: 0 auto; padding: 3rem 1.5rem 5rem; }
.brochure-body h1 { font-size: 2rem; font-weight: 700; color: #0f172a; margin-bottom: .5rem; }
.brochure-body .effective { color: #64748b; font-size: .875rem; margin-bottom: 2.5rem; }
.brochure-body h2 { font-size: 1.125rem; font-weight: 600; color: #0f172a; margin-top: 2rem; margin-bottom: .5rem; }
.brochure-body p, .brochure-body li { color: #334155; line-height: 1.75; }
.brochure-body ul { padding-left: 1.5rem; margin-bottom: 1rem; }

/* ── Home hero ────────────────────────────────────────────────────────── */
.brochure-hero { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); color: #fff; padding: 5rem 2rem 4rem; text-align: center; }
.brochure-hero h1 { font-size: 3rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.15; }
.brochure-hero p { font-size: 1.25rem; color: #cbd5e1; max-width: 640px; margin: 0 auto 2.5rem; line-height: 1.6; }
.brochure-hero .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── Stats bar ────────────────────────────────────────────────────────── */
.brochure-stats { background: #4f46e5; color: #fff; padding: 2rem; }
.brochure-stats .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.5rem; max-width: 1100px; margin: 0 auto; text-align: center; }
.brochure-stats .stat-value { font-size: 2rem; font-weight: 800; }
.brochure-stats .stat-label { font-size: .875rem; opacity: .85; }

/* ── Inner-page hero ──────────────────────────────────────────────────── */
.brochure-page-hero { background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 3.5rem 2rem 3rem; text-align: center; }
.brochure-page-hero h1 { font-size: 2.5rem; font-weight: 800; color: #0f172a; margin-bottom: .75rem; }
.brochure-page-hero p { color: #64748b; font-size: 1.125rem; max-width: 560px; margin: 0 auto; }

/* ── Content sections ─────────────────────────────────────────────────── */
.brochure-section { max-width: 1100px; margin: 0 auto; padding: 5rem 2rem; }
.brochure-section--alt { background: #f8fafc; max-width: 100%; padding: 0; }
.brochure-section--alt .brochure-section,
.brochure-section.brochure-section--alt { max-width: 1100px; margin: 0 auto; padding: 5rem 2rem; background: transparent; }
.brochure-section__header { text-align: center; margin-bottom: 3rem; }
.brochure-section__header h2 { font-size: 2rem; font-weight: 700; color: #0f172a; }
.brochure-section__header p { color: #64748b; font-size: 1.0625rem; max-width: 560px; margin: .75rem auto 0; }

/* ── Feature cards ────────────────────────────────────────────────────── */
.brochure-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.brochure-feature { display: flex; flex-direction: column; gap: .75rem; }
.brochure-feature-icon { width: 48px; height: 48px; border-radius: 12px; background: #4f46e5; display: flex; align-items: center; justify-content: center; color: #fff; }

/* ── Persona grid ─────────────────────────────────────────────────────── */
.brochure-personas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.brochure-persona { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem; }
.brochure-persona-icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }

/* ── CTA section ──────────────────────────────────────────────────────── */
.brochure-cta { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; text-align: center; padding: 5rem 2rem; }
.brochure-cta h2 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; }
.brochure-cta p { font-size: 1.125rem; opacity: .9; max-width: 560px; margin: 0 auto; }

/* ── Pricing plans ────────────────────────────────────────────────────── */
.brochure-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.brochure-plan { border: 1px solid #e2e8f0; border-radius: 16px; padding: 2rem; position: relative; background: #fff; }
.brochure-plan--featured { border-color: #4f46e5; border-width: 2px; }
.brochure-plan__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #4f46e5; color: #fff; font-size: .75rem; font-weight: 600; padding: .25rem .75rem; border-radius: 99px; white-space: nowrap; }
.brochure-plan__header h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: .25rem; }
.brochure-plan__price { font-size: 1.75rem; font-weight: 800; color: #4f46e5; margin: 1.5rem 0; }
.brochure-plan__features { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: .75rem; }
.brochure-plan__features li { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; }
.brochure-plan__features .material-icons-round { font-size: 1.125rem; color: #22c55e; }
.brochure-plan__features li.text-muted .material-icons-round { color: #94a3b8; }

/* ── Timeline ─────────────────────────────────────────────────────────── */
.brochure-timeline { position: relative; padding-left: 2.5rem; }
.brochure-timeline::before { content: ''; position: absolute; left: .75rem; top: 0; bottom: 0; width: 2px; background: #e2e8f0; }
.brochure-timeline-item { position: relative; padding-bottom: 2.5rem; }
.brochure-timeline-item::before { content: ''; position: absolute; left: -2rem; top: .375rem; width: 12px; height: 12px; border-radius: 50%; background: #4f46e5; }
.brochure-timeline-item h4 { font-size: 1rem; font-weight: 600; margin-bottom: .375rem; }
.brochure-timeline-item p { color: #64748b; margin: 0; }

/* ── Portals / Tech grid ──────────────────────────────────────────────── */
.brochure-portals { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.brochure-tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.brochure-tech-card { border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; text-align: center; }
.brochure-tech-card h5 { font-size: .9375rem; font-weight: 600; margin-bottom: .25rem; }
.brochure-tech-card p { font-size: .8125rem; color: #64748b; margin: 0; }

/* ── Template marketplace ─────────────────────────────────────────────── */
.brochure-templates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }

/* ── Icon utilities ───────────────────────────────────────────────────── */
.icon-lg { font-size: 2rem; }
.icon-empty-state { font-size: 3rem; color: var(--color-text-subtle, #94a3b8); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.brochure-footer { background: #f1f5f9; border-top: 1px solid #e2e8f0; padding: 1.5rem 2rem; text-align: center; color: #64748b; font-size: .8125rem; }
.brochure-footer a { color: #4f46e5; text-decoration: none; margin: 0 .75rem; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .brochure-hero h1 { font-size: 2rem; }
  .brochure-nav { padding: 0 1rem; }
  .brochure-nav .nav-links { display: none; }
  .brochure-section { padding: 3rem 1.25rem; }
  .brochure-page-hero { padding: 2.5rem 1.25rem 2rem; }
  .brochure-page-hero h1 { font-size: 1.875rem; }
}