/*
 * Home page (app/Views/home.php) - 2026-10 design. Plain CSS on top of
 * Bootstrap + brand.css (no Tailwind, no external fonts). Mobile first.
 */

html, body { height: 100%; }
body.home-v2 { display: flex; flex-direction: column; background: #fff; }
.home-v2 .public-page-content { flex: 1 0 auto; }

/* ---------------------------------------------------------------
 * Header (Home only - other pages keep brand.css): taller navy bar,
 * bigger extra-bold wordmark, gold tagline, gold active link, bigger
 * buttons, links centred on wide screens.
 * ------------------------------------------------------------- */
.home-v2 .public-header {
    background: #0e1c36 !important;
    border-bottom: 1px solid rgba(100, 116, 139, .45);
    box-shadow: 0 4px 10px rgba(14, 28, 54, .25);
    padding-top: 12px; padding-bottom: 12px;
}
.home-v2 .public-header .brand-logo-wrap { display: flex; flex-direction: column; align-items: flex-start; --logo-h: auto; }
.home-v2 .public-header .brand-wordmark { height: auto; font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.home-v2 .public-header .brand-tagline {
    position: static; transform: none; width: auto; text-align: right; align-self: flex-end; /* under the name's right edge */
    color: #fbbf24; font-size: .8rem; font-weight: 600; letter-spacing: .02em; margin-top: 2px;
}
.home-v2 .public-header .navbar-toggler { border-color: rgba(203, 213, 225, .35); padding: 6px 10px; }
.home-v2 .public-header .nav-link { font-size: 1rem; font-weight: 600; color: #e2e8f0; }
.home-v2 .public-header .nav-link:hover, .home-v2 .public-header .nav-link:focus { color: #fcd34d; }
.home-v2 .public-header .nav-link.active {
    color: #fbbf24; text-decoration: none;
    box-shadow: inset 0 -2px 0 #fbbf24; /* gold underline */
}
.home-v2 .public-header .btn.rounded-pill { font-size: .95rem; font-weight: 700; padding: .55rem 1.4rem; }
.home-v2 .public-header .btn-outline-light { border-color: #64748b; }
.home-v2 .public-header .btn-outline-light:hover { background: #1e293b; border-color: #cbd5e1; color: #fff; }
.home-v2 .public-header .btn-primary { box-shadow: 0 4px 12px rgba(76, 111, 224, .35); }
@media (max-width: 991.98px) {
    .home-v2 .public-header .navbar-nav { padding-top: 10px; }
    .home-v2 .public-header .nav-link.active { box-shadow: none; text-decoration: underline; text-decoration-color: #fbbf24; text-underline-offset: 6px; }
    .home-v2 .public-header .d-flex.gap-2 { padding-bottom: 6px; }
}
@media (min-width: 992px) {
    .home-v2 .public-header { padding-top: 0; padding-bottom: 0; min-height: 80px; }
    .home-v2 .public-header .brand-wordmark { font-size: 1.875rem; }
    .home-v2 .public-header .brand-tagline { font-size: .875rem; }
    .home-v2 .public-header .navbar-nav { margin-left: auto !important; margin-right: auto !important; gap: 1.6rem; }
    .home-v2 .public-header .nav-link { padding: 6px 0 !important; }
}

/* ---------------------------------------------------------------
 * Hero + quick search
 * ------------------------------------------------------------- */
.home-hero {
    background: linear-gradient(180deg, #eef4ff 0%, #fff 55%, #f8fafc 100%);
    border-bottom: 1px solid rgba(226, 232, 240, .7);
    padding: 44px 0 44px;
    text-align: center;
}
.home-hero .hero-logo { --logo-h: 46px; margin-bottom: 16px; }
.home-hero h1 {
    font-family: var(--brand-font-heading);
    font-weight: 800;
    font-size: clamp(2.25rem, 9.5vw, 3.75rem);
    letter-spacing: -.015em;
    line-height: 1.1;
    color: #0f172a;
    margin-bottom: 14px;
}
.home-hero .lead { color: #475569; font-size: 1.02rem; line-height: 1.6; max-width: 640px; margin: 0 auto 26px; }
.home-hero .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.home-hero .hero-actions .btn { min-width: 148px; padding: 13px 30px; font-size: 1.05rem; font-weight: 700; }
.home-hero .btn-hero-login { background: #fff; border: 1px solid #cbd5e1; color: #1e293b; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.home-hero .btn-hero-login:hover, .home-hero .btn-hero-login:focus { background: #f1f5f9; border-color: #94a3b8; color: #1e293b; }
.home-hero .btn-hero-signup { box-shadow: 0 10px 22px rgba(76, 111, 224, .35); }
.home-hero .hero-ticks { gap: 10px 20px; margin-top: 24px; }
.home-hero .hero-ticks span { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; font-weight: 600; color: #334155; }
.home-hero .hero-ticks i { font-size: 1.05rem; margin-right: 0; }
/* "Serving The Community Since 2012" - small gold badge just above the ticks. */
.home-hero .hero-since {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 22px;
    padding: 4px 12px; border-radius: 999px;
    background: #fff8e6; border: 1px solid #f1d58f; color: #8a5a0b;
    font-size: .8rem; font-weight: 700; letter-spacing: .01em;
}
.home-hero .hero-since + .hero-ticks { margin-top: 12px; }

.hero-search-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(20, 33, 61, .1);
    padding: 16px;
    margin: 28px auto 0;
    max-width: 960px;
    text-align: left;
}
.hero-search-card .form-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748b; margin-bottom: 4px;
}
.hero-search-card .form-select { background-color: #f8fafc; border-color: #cbd5e1; border-radius: 10px; font-size: .9rem; }
.hero-search-card .btn-search { border-radius: 10px; font-weight: 700; padding: 8px 12px; }
.hero-search-note { font-size: .78rem; color: #64748b; text-align: center; margin: 10px 0 0; }

/* ---------------------------------------------------------------
 * "Serving The Community Since 2012" band
 * ------------------------------------------------------------- */
.home-community {
    background: linear-gradient(120deg, #2f56d6 0%, #2a46b0 40%, var(--brand-dark) 100%);
    color: #fff; text-align: center; padding: 40px 0;
}
.home-community h2 { font-family: var(--brand-font-heading); font-size: 1.45rem; font-weight: 700; margin-bottom: 10px; color: #fff; }
.home-community h2 .bi { color: var(--brand-accent); }
.home-community p { color: rgba(255, 255, 255, .88); font-size: .95rem; max-width: 600px; margin: 0 auto 20px; }
.home-community .btn-meet-someone {
    background: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-dark);
    font-weight: 700; padding: 10px 28px; box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}
.home-community .btn-meet-someone:hover, .home-community .btn-meet-someone:focus {
    background: var(--brand-accent-dark); border-color: var(--brand-accent-dark); color: var(--brand-dark);
}

/* ---------------------------------------------------------------
 * Sections: How It Works / Why / closing CTA
 * ------------------------------------------------------------- */
.home-section { padding: 48px 0; }
.home-section h2 { font-family: var(--brand-font-heading); text-align: center; color: var(--brand-dark); font-size: 1.75rem; margin-bottom: 6px; }
.home-section .section-subtitle { text-align: center; color: #64748b; font-size: .9rem; margin-bottom: 32px; }

.home-step { text-align: center; position: relative; padding: 4px 8px; }
.home-step .step-number-large { font-size: 3.2rem; opacity: .08; margin-bottom: -26px; }
.home-step .step-icon {
    position: relative; width: 56px; height: 56px; border-radius: 50%;
    background: var(--brand-soft-bg); color: var(--brand-primary);
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin: 0 auto 14px;
    box-shadow: 0 0 0 6px #fff;
}
.home-step h3 { font-family: var(--brand-font-heading); font-size: 1.1rem; color: var(--brand-dark); margin-bottom: 6px; }
.home-step p { color: #64748b; font-size: .85rem; max-width: 280px; margin: 0 auto; }

.home-why { background: var(--brand-soft-bg); }
.trust-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
    padding: 18px 14px; height: 100%; text-align: center;
    box-shadow: 0 4px 14px rgba(20, 33, 61, .05);
}
.trust-card .trust-icon {
    width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-soft-bg); color: var(--brand-primary); font-size: 1.25rem;
}
.trust-card h3 { font-size: .95rem; font-weight: 700; color: var(--brand-dark); margin-bottom: 6px; }
.trust-card p { color: #64748b; font-size: .8rem; margin: 0; }

.home-closing { text-align: center; background: #fff; }
.home-closing .btn { padding: 12px 30px; font-weight: 700; box-shadow: 0 6px 16px rgba(76, 111, 224, .3); }

/* ---------------------------------------------------------------
 * Share strip (just above the footer)
 * ------------------------------------------------------------- */
.home-share {
    background: #f8fafc; border-top: 1px solid #e2e8f0;
    padding: 14px 0;
}
.home-share-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; text-align: center; }
.home-share-text { font-size: .9rem; color: var(--brand-dark); font-weight: 600; margin: 0; }
.home-share .share-btn-whatsapp { padding: 7px 18px; font-weight: 700; }

/* ---------------------------------------------------------------
 * Wider screens
 * ------------------------------------------------------------- */
@media (min-width: 768px) {
    .home-hero { padding: 64px 0 64px; }
    .home-hero .lead { font-size: 1.125rem; }
    .hero-search-card { padding: 20px 22px; }
    .home-community { padding: 52px 0; }
    .home-community h2 { font-size: 1.7rem; }
    .home-section { padding: 64px 0; }
    .home-section h2 { font-size: 2.1rem; }
    .trust-card { padding: 24px 18px; }
}