/*
Theme Name: Astra Child
Template: astra
Version: 1.0
*/

:root {
    --navy: #0a2540;
    --green: #42b72a;
    --white: #ffffff;
    --soft-grey: #f8fafc;
    --border: #e0e6ed;
    --radius: 12px;
}

.fmn-profile-wrapper {
    font-family: 'Inter', sans-serif;
    background: var(--soft-grey);
    padding: 20px;
    max-width: 1280px;
    margin: 0 auto;
}

.profile-hero {
    position: relative;
    margin-bottom: 100px;
}

.cover-photo {
    height: 320px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}
.cover-photo img { width:100%; height:100%; object-fit:cover; }

.profile-mask-wrapper {
    position: absolute;
    bottom: -70px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    gap: 20px;
}

.profile-logo-mask {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 6px solid white;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.profile-logo-mask img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero-identity {
    background: white;
    padding: 15px 25px;
    border-radius: var(--radius);
}
.hero-identity h1 { margin:0; color:var(--navy); }

.kpi-strip {
    display:grid;
    grid-template-columns: repeat(4,1fr);
    gap:15px;
    margin-bottom:30px;
}
.kpi-card {
    background:white;
    padding:15px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    text-align:center;
}

.nursery-grid {
    display:flex;
    flex-wrap:wrap;
    gap:30px;
}
.nursery-left { flex:2 1 650px; }
.nursery-right { flex:1 1 300px; }

.nursery-pro-card {
    background:white;
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:25px;
    margin-bottom:25px;
}

.about-wrapper {
    max-height:250px;
    overflow:hidden;
    position:relative;
    transition:0.4s;
}
.about-wrapper.expanded { max-height:5000px; }

.about-fade {
    position:absolute;
    bottom:0;
    height:80px;
    width:100%;
    background:linear-gradient(transparent,white);
}
.about-wrapper.expanded .about-fade { display:none; }

.photo-hero img {
    width:100%;
    border-radius:var(--radius);
    margin-bottom:10px;
}
.photo-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}
.photo-grid img {
    width:100%;
    border-radius:var(--radius);
}

.sticky-sidebar { position:sticky; top:20px; }

.custom-btn {
    display:none;
    padding:14px;
    border-radius:8px;
    text-align:center;
    color:white;
    margin-top:10px;
}
.btn-wa { background:#25D366; }
.btn-em { background:#3b82f6; }
.btn-web { background:#0a2540; }

.v-badge {
    background:#dcfce7;
    color:#166534;
    padding:5px 15px;
    border-radius:20px;
    font-size:0.75rem;
    font-weight:900;
}

.fmn-kpis {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin-bottom:30px;
}

.fmn-kpi {
    background:white;
    padding:15px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    text-align:center;
}

.fmn-kpi small {
    display:block;
    color:#94a3b8;
    font-weight:700;
    text-transform:uppercase;
    font-size:0.7rem;
    margin-bottom:6px;
}

.fmn-kpi strong {
    display:block;
    color:var(--navy);
    font-size:1.1rem;
    font-weight:800;
}

.fmn-page-wrap {
    font-family:'Inter', sans-serif;
    background:var(--soft-grey);
    padding:20px;
    max-width:1280px;
    margin:0 auto;
}

@media(max-width:768px){
    .profile-mask-wrapper {
        flex-direction:column;
        bottom:-120px;
    }
    .nursery-grid { flex-direction:column; }
    .fmn-kpis { grid-template-columns:repeat(2,1fr); }
    .kpi-strip { grid-template-columns:repeat(2,1fr); }
}
.fmn-page { width:100%; }
.fmn-container { max-width:1140px; margin:0 auto; padding:40px 20px; box-sizing:border-box; }

/* ===== MOBILE HEADER: shrink oversized logo + tighten header band (mobile only, <=768px) ===== */
/* Astra forces logo to 170px at all widths; override on mobile only. Desktop unchanged. */
@media (max-width: 768px) {
    header .custom-logo-link img { max-width: 120px !important; width: 120px !important; height: auto !important; }
    .ast-primary-header-bar.main-header-bar,
    .main-header-bar { padding-top: 6px !important; padding-bottom: 6px !important; }
}

/* ===== AREA PAGES: stop hero H1 being clipped on mobile (fixes all area pages at once) =====
   The area-page hero (.fmn-pillar-wrap only) is a fixed-height overflow:hidden box with the
   title block absolutely pinned to the bottom, so long titles grow upward and clip at the top.
   On phones, let the hero grow to fit its content. Scoped to .fmn-pillar-wrap so it never
   touches the neighbourhood hub (which reuses .fmn-hero-* class names). Desktop unchanged. */
@media (max-width: 639px) {
    .fmn-pillar-wrap .fmn-hero-media { height: auto !important; min-height: 340px; display: flex !important; align-items: flex-end; }
    .fmn-pillar-wrap .fmn-hero-inner { position: relative !important; z-index: 1; }
    .fmn-pillar-wrap .fmn-hero-title { font-size: 1.7rem !important; text-shadow: 0 2px 14px rgba(0,0,0,0.6); }
    .fmn-pillar-wrap .fmn-hero-sub { text-shadow: 0 1px 10px rgba(0,0,0,0.55); }
    /* Stack the Quick Nav / Perfect Match sidebar full-width on mobile (was cramped side-by-side) */
    .fmn-pillar-wrap .fmn-sidebar { flex-direction: column !important; }
    .fmn-pillar-wrap .fmn-sidebar-nav,
    .fmn-pillar-wrap .fmn-sidebar-cta { width: 100% !important; }
    /* Shrink the oversized 'Latest Articles' cards on mobile (smaller image + tighter padding) */
    .fmn-pillar-wrap .fmn-card-img-wrap { height: 160px !important; min-height: 0 !important; }
    .fmn-pillar-wrap .fmn-card-img-wrap img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
    .fmn-pillar-wrap .fmn-card-body { padding: 16px !important; }
    .fmn-pillar-wrap .fmn-card-excerpt { font-size: 14px !important; }
}