/*
Theme Name: Belleville Child Care Center
Description: Family owned and operated since 1975. Custom center website with editable pages.
Version: 1.4.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: bccc
*/
    :root { color-scheme: light; --ink:#1c3653; --blue:#225f95; --sky:#dceef7; --cream:#fffaf0; --yellow:#ffd35a; --orange:#ef865f; --line:#d7e1e5; --muted:#4f6472; }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; font-family:'DM Sans',sans-serif; color:var(--ink); background:#fff; font-size:1rem; line-height:1.55; }
    a { color:inherit; }
    button,a { -webkit-tap-highlight-color:transparent; }
    a:focus-visible { outline:3px solid var(--orange); outline-offset:4px; }
    .wrap { width:min(1180px,calc(100% - 48px)); margin:auto; }
    .topbar { background:var(--ink); color:#fff; font-size:.9rem; }
    .topbar .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 0; }
    .topbar p { margin:0; }
    .topbar a { text-decoration:none; font-weight:700; white-space:nowrap; }
    header { background:#fff; border-bottom:1px solid var(--line); }
    .nav { min-height:83px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
    .brand { display:flex; align-items:center; gap:11px; text-decoration:none; font-family:Outfit,sans-serif; font-weight:800; font-size:1.18rem; letter-spacing:-.035em; line-height:1.08; }
    .brand-mark { display:block; width:53px; height:53px; flex:none; }
    .brand .brand-second { font-size:.92rem; font-weight:700; letter-spacing:-.015em; color:var(--blue); }
    nav { display:flex; align-items:center; gap:28px; }
    nav a { text-decoration:none; font-weight:700; font-size:.91rem; }
    .nav-cta,.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:100px; background:var(--yellow); color:var(--ink); padding:13px 21px; text-decoration:none; font-weight:800; border:2px solid var(--yellow); transition:transform .2s,background .2s; }
    .nav-cta:hover,.button:hover { transform:translateY(-2px); background:#ffe080; }
    .nav-cta { padding:10px 18px; }
    .hero { background:var(--cream); overflow:hidden; }
    .hero-grid { display:grid; grid-template-columns:1fr 1.02fr; min-height:590px; align-items:stretch; }
    .hero-copy { align-self:center; padding:76px 58px 76px 0; }
    .eyebrow { display:inline-block; font-weight:800; color:var(--blue); font-size:.83rem; letter-spacing:.115em; text-transform:uppercase; }
    h1,h2,h3 { font-family:Outfit,sans-serif; line-height:1.08; letter-spacing:-.04em; }
    h1 { font-size:clamp(3.2rem,5.3vw,5.6rem); margin:18px 0 22px; max-width:650px; }
    .hero-copy p { font-size:1.2rem; color:var(--muted); max-width:520px; margin:0 0 30px; }
    .hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:13px 25px; }
    .text-link { font-weight:800; text-underline-offset:5px; }
    .hero-photo { position:relative; min-height:500px; background:var(--sky); }
    .hero-photo img { display:block; width:100%; height:100%; object-fit:cover; }
    .photo-note { position:absolute; bottom:27px; left:27px; background:#fff; padding:16px 20px; border-radius:14px; box-shadow:0 15px 40px #1c365329; font-family:Outfit,sans-serif; font-weight:700; max-width:230px; line-height:1.2; }
    .hero-photo::after { content:none; position:absolute; right:16px; bottom:12px; color:#fff; background:#1c3653cc; padding:3px 8px; border-radius:6px; font-size:.75rem; }
    .photo-note strong { display:block; font-size:1.55rem; }
    .facts { background:var(--ink); color:#fff; }
    .facts-grid { display:grid; grid-template-columns:repeat(3,1fr); }
    .fact { padding:27px 30px; border-right:1px solid #ffffff32; }
    .fact:first-child { padding-left:0; } .fact:last-child { border:0; }
    .fact strong { display:block; font:700 1.18rem Outfit,sans-serif; }
    .fact span { color:#d1dfe8; font-size:.9rem; }
    section { scroll-margin-top:24px; }
    .section { padding:94px 0; }
    .section-head { max-width:700px; margin-bottom:39px; }
    h2 { font-size:clamp(2.5rem,4vw,3.8rem); margin:12px 0 14px; }
    .section-head p { color:var(--muted); font-size:1.08rem; margin:0; }
    .program-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
    .program { border:1px solid var(--line); border-radius:23px; padding:30px; min-height:275px; display:flex; flex-direction:column; background:#fff; }
    .program:nth-child(2) { background:#e8f3f9; border-color:#e8f3f9; }
    .program:nth-child(3) { background:#fff5db; border-color:#fff5db; }
    .program .num { color:var(--blue); font:800 .9rem Outfit,sans-serif; letter-spacing:.08em; }
    .program h3 { font-size:1.65rem; margin:27px 0 12px; }
    .program p { margin:0; color:var(--muted); }
    .about { background:var(--sky); }
    .about-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:8vw; }
    .about h2 { margin-top:12px; }
    .about p { color:#344f61; font-size:1.1rem; }
    .about-panel { padding:43px; border-radius:25px; background:#fff; box-shadow:13px 13px 0 #b8dce9; }
    .about-panel h3 { font-size:1.7rem; margin:0 0 18px; }
    .about-panel ul { list-style:none; padding:0; margin:0; }
    .about-panel li { border-top:1px solid var(--line); padding:14px 0; font-weight:600; }
    .about-panel li:last-child { padding-bottom:0; }
    .contact { background:var(--cream); }
    .contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:center; }
    .contact h2 { margin-bottom:20px; }
    .contact p { color:var(--muted); font-size:1.1rem; }
    .contact .button { margin-top:11px; }
    .contact-card { background:#fff; border:1px solid var(--line); border-radius:23px; padding:37px; }
    .contact-card div + div { border-top:1px solid var(--line); margin-top:22px; padding-top:22px; }
    .contact-card small { display:block; color:var(--blue); font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; margin-bottom:5px; }
    .contact-card a { font:700 1.16rem Outfit,sans-serif; text-underline-offset:3px; }
    .contact-card p { margin:0; color:var(--ink); font-size:1.06rem; }
    footer { background:var(--ink); color:#d9e5ed; padding:30px 0; font-size:.9rem; }
    footer .wrap { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
    footer p { margin:0; }
    @media (max-width:850px) {
      .hero-grid { grid-template-columns:1fr; }
      .hero-copy { padding:64px 0; }
      .hero-photo { height:380px; min-height:0; margin:0 -24px; }
      .program-grid { grid-template-columns:1fr; }
      .program { min-height:0; }
      .program h3 { margin-top:17px; }
      .about-grid,.contact-grid { gap:42px; }
    }
    @media (max-width:640px) {
      .wrap { width:min(100% - 36px,1180px); }
      .topbar .wrap { justify-content:center; } .topbar p { display:none; }
      .nav { min-height:76px; }
      .brand { font-size:1.02rem; } .brand-mark { width:45px; height:45px; }
      nav { gap:0; } nav a:not(.nav-cta) { display:none; }
      .nav-cta { font-size:.84rem; padding:8px 13px; }
      h1 { font-size:clamp(3rem,13vw,4.2rem); }
      .hero-copy { padding:53px 0; }
      .hero-copy p { font-size:1.08rem; }
      .hero-photo { margin:0 -18px; height:330px; }
      .photo-note { bottom:16px; left:18px; padding:12px 15px; font-size:.85rem; }
      .facts-grid { grid-template-columns:1fr; }
      .fact,.fact:first-child { border-right:0; border-bottom:1px solid #ffffff32; padding:17px 0; }
      .fact:last-child { border-bottom:0; }
      .section { padding:68px 0; }
      .about-grid,.contact-grid { grid-template-columns:1fr; }
      .about-panel,.contact-card { padding:28px; }
    }
    @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button,.nav-cta { transition:none; } }
  
.mobile-links { display:none; }
.interior-hero { background:var(--cream); padding:76px 0 68px; }
.interior-hero h1 { max-width:900px; margin-bottom:18px; }
.interior-hero p { max-width:720px; font-size:1.2rem; color:var(--muted); margin:0; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.detail-card { border:1px solid var(--line); border-radius:23px; padding:32px; background:#fff; }
.detail-card:nth-child(even) { background:#e8f3f9; border-color:#e8f3f9; }
.detail-card h2 { font-size:1.7rem; margin:8px 0 12px; }
.detail-card p { margin:0; color:var(--muted); }
.detail-card ul { list-style:disc; padding-left:1.35rem; margin:15px 0 22px; font-weight:700; }
.detail-card li + li { margin-top:7px; }
.detail-card a { font-weight:800; color:var(--blue); text-underline-offset:3px; }
.callout { background:var(--ink); color:#fff; border-radius:24px; padding:40px; margin-top:30px; }
.callout h2 { font-size:2.25rem; margin:0 0 12px; }
.callout p { color:#d9e5ed; margin:0 0 23px; }
.menu-panel { border:1px solid var(--line); border-radius:24px; overflow:hidden; background:#fff; }
.menu-panel img { display:block; width:100%; height:auto; }
.menu-empty { padding:44px; color:var(--muted); }
.admin-card { max-width:670px; border:1px solid var(--line); border-radius:24px; padding:32px; background:#fff; }
.admin-card label { display:block; font-weight:700; margin:18px 0 7px; }
.admin-card input { width:100%; }
.admin-card button { margin-top:22px; }
.admin-card .help { font-size:.9rem; color:var(--muted); }
@media (max-width:850px) { .detail-grid { grid-template-columns:1fr; } }
@media (max-width:640px) {
  .mobile-links { display:flex; gap:20px; overflow-x:auto; padding:0 0 13px; white-space:nowrap; }
  .mobile-links a { font-size:.9rem; font-weight:700; text-decoration:none; }
  .interior-hero { padding:55px 0; }
  .detail-card,.callout,.admin-card { padding:26px; }
}
@media (max-width:950px) {
  header .nav nav a:not(.nav-cta) { display:none; }
  .mobile-links { display:flex; gap:22px; overflow-x:auto; padding:0 0 13px; white-space:nowrap; }
  .mobile-links a:not(.nav-cta) { display:inline-block; font-size:.9rem; font-weight:700; text-decoration:none; }
}

img{max-width:100%;} .page-content{min-height:45vh;} .page-content .wp-block-image img{height:auto;} .page-content > p{font-size:1.1rem;}

@media(min-width:951px){header nav{gap:18px;}}
.contact-card a{overflow-wrap:anywhere;}

/* Real center photographs */
.hero-photo img { object-position:center; }
.photo-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px; }
.photo-grid figure { margin:0;overflow:hidden;border-radius:18px;background:#f4f7f9; }
.photo-grid img { display:block;width:100%;height:320px;object-fit:cover;object-position:center; }
.photo-grid figcaption { padding:16px 20px;font-weight:600; }
@media(max-width:640px) { .photo-grid { grid-template-columns:1fr;gap:18px; } .photo-grid img { height:300px; } }

.topbar-contact,.header-actions { display:flex;align-items:center;gap:12px; }
.email-cta { background:transparent;border-color:var(--blue);color:var(--blue); }
.email-cta:hover { background:var(--sky); }
@media(min-width:641px) and (max-width:1100px) { .nav { flex-wrap:wrap;padding:16px 0;gap:16px; } .nav nav { flex-wrap:wrap;gap:18px; } }
@media(max-width:640px) { .header-actions { gap:6px; } .header-actions .nav-cta { padding:8px 10px; } }
@media(max-width:390px) { .nav { flex-wrap:wrap;padding:12px 0;gap:12px; } .nav nav { margin-left:auto; } }

.family-story { background:var(--cream); } .family-photo { margin:0; } .family-photo img { display:block;width:100%;max-height:580px;object-fit:cover;object-position:center 35%;border-radius:20px; } .family-photo figcaption { margin-top:12px;font-weight:600; } .day-schedule article { display:grid;grid-template-columns:190px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid #dae3e8; } .day-schedule article>span { font-weight:700;color:var(--blue); } .day-schedule h3 { margin:0 0 8px; } .day-schedule p { margin:0; } .trip-list { display:grid;grid-template-columns:repeat(3,1fr);gap:12px 28px;padding-left:20px;margin-bottom:28px; } .parent-quote { background:var(--cream); } .parent-quote blockquote { margin:24px 0 0;max-width:850px;font-size:1.4rem; } .parent-quote footer { background:transparent;color:var(--blue);padding:12px 0;font-size:1rem;font-weight:700; } @media(max-width:640px) { .day-schedule article { grid-template-columns:1fr;gap:8px; } .trip-list { grid-template-columns:1fr; } }