/* Solomike ECC — site-wide brand layer for interior (non-homepage) pages.
   Additive only: fonts, colors, buttons, nav + footer restyle. No layout/structure
   changes, so it can't break existing page templates. The homepage has its own
   full design (home.css) and does not load this file. */
:root{
  --secc-white:#ffffff; --secc-ink:#1a1a1a; --secc-soft:#555; --secc-border:#e7e7e7; --secc-alt:#f6f6f6;
  --secc-teal:#00a7b9; --secc-teal-d:#0c7c8a; --secc-sage:#668a64; --secc-gold:#e59c35; --secc-terra:#c94c3d;
  --secc-round:'Raleway',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* Base foundation — mirrors the homepage (home.css) so every page shares the
   same size, fonts, spacing, and colors. The parent theme's style.css is not
   loaded on interior pages (see header.php), so this is the single source. */
*{box-sizing:border-box}
/* Bootstrap (loaded on interior pages, but NOT the homepage) sets html{font-size:10px},
   which shrinks every rem-based size to ~62% and made interior pages look "zoomed out."
   Reset to the browser default so interior rem sizing matches the homepage. */
html{font-size:100%}
body{margin:0;background:var(--secc-white);color:var(--secc-ink);font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}

/* Typography */
h1,h2,h3,h4,.page-title h1{font-family:var(--secc-round);font-weight:800;line-height:1.1;letter-spacing:-.01em;color:var(--secc-ink)}
a{color:var(--secc-teal)}
a:hover,a:focus{color:var(--secc-teal-d)}

/* Buttons — gold with dark text, matching the homepage. */
.btn,button,input[type="submit"],.search-submit,.wp-block-button__link{
  font-family:var(--secc-round);font-weight:800;font-size:.95rem;padding:.72rem 1.4rem;border-radius:99px;
  text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;border:2px solid transparent;cursor:pointer;
  background:var(--secc-gold);color:var(--secc-ink);box-shadow:0 2px 6px rgba(0,0,0,.08);transition:transform .16s ease,filter .2s}
.btn:hover,button:hover,input[type="submit"]:hover,.search-submit:hover,.wp-block-button__link:hover{
  background:var(--secc-gold);color:var(--secc-ink);transform:translateY(-2px);filter:brightness(1.04)}

/* Shared page container, matching the homepage width. */
.wrap{max-width:74rem;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.5rem)}

/* Interior page bodies wrap content in Bootstrap 3 .container/.row/.col markup.
   Bootstrap's .container has a FIXED width (970/1170px) that overflows our
   narrower .wrap / .secc-about wrappers, so content spilled outside its box.
   Flatten the grid to plain full-width blocks and let our wrappers set the
   measure. (Interior pages are single-column, so no grid is actually needed.) */
.page-title .container,.content .container{width:auto;max-width:100%;padding-left:0;padding-right:0}
.page-title .row,.content .row{margin-left:0;margin-right:0}
.page-title [class*="col-"],.content [class*="col-"]{width:100%;padding-left:0;padding-right:0;float:none}

/* "Back" link — sits just under the nav on interior pages. Returns to the
   previous page (JS), falling back to the homepage link when there's no history. */
.secc-backbar{padding-top:1rem}
.secc-back{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--secc-round);font-weight:700;font-size:.9rem;color:var(--secc-ink);text-decoration:none;padding:.4rem .2rem}
.secc-back:hover,.secc-back:focus{color:var(--secc-teal)}
.secc-back .secc-back-arrow{font-size:1.05em;line-height:1}

/* Modern interior nav — mirrors the homepage chrome (header.php markup).
   Sticky, not fixed: no hero underneath it on interior pages. Scoped to
   #nav / #nav-links so it never collides with Bootstrap's generic .nav. */
#nav{position:sticky;top:0;z-index:40;background:var(--secc-white);box-shadow:0 1px 0 var(--secc-border),0 2px 12px rgba(0,0,0,.05)}
#nav .nav-in{max-width:74rem;margin:0 auto;padding:.55rem clamp(1.1rem,4vw,2.5rem);display:flex;align-items:center;gap:1.4rem}
#nav .brand{display:flex;align-items:center;gap:.55rem;font-family:var(--secc-round);font-weight:900;font-size:1.13rem;text-decoration:none;color:var(--secc-ink);white-space:nowrap}
#nav .brand-logo{height:44px;width:auto;display:block}
#nav-links{display:flex;gap:1.3rem;margin-left:auto;align-items:center}
#nav-links a{color:var(--secc-ink);text-decoration:none;font-size:.93rem;font-weight:700;font-family:var(--secc-round);transition:color .2s}
#nav-links a:hover{color:var(--secc-teal)}
#nav-links a.btn{color:var(--secc-ink)}
#nav .nav-toggle{display:none;margin-left:auto;background:none;border:0;padding:.4rem;cursor:pointer;width:44px;height:44px;align-items:center;justify-content:center}
#nav .nav-toggle-bars{position:relative}
#nav .nav-toggle-bars,#nav .nav-toggle-bars::before,#nav .nav-toggle-bars::after{content:"";display:block;width:24px;height:2.5px;border-radius:3px;background:var(--secc-ink);transition:transform .25s,opacity .2s}
#nav .nav-toggle-bars::before{position:absolute;top:-7px;left:0}
#nav .nav-toggle-bars::after{position:absolute;top:7px;left:0}
#nav .nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
#nav .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(7px) rotate(45deg)}
#nav .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-7px) rotate(-45deg)}
@media (max-width:860px){
  #nav .nav-toggle{display:inline-flex}
  #nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:.15rem;margin:0;padding:.5rem clamp(1.1rem,4vw,2.5rem) 1rem;background:var(--secc-white);box-shadow:0 12px 26px rgba(0,0,0,.1);display:none}
  #nav-links.open{display:flex}
  #nav-links a{padding:.7rem .3rem;font-size:1rem}
  #nav-links a.btn{margin-top:.4rem;justify-content:center;text-align:center}
}

/* Header / nav — clean white bar, brand type. (Colors/fonts only; Bootstrap
   layout + mobile collapse behavior are left untouched.) */
.main-nav,.navbar-default{background:var(--secc-white);border-color:var(--secc-border)}
#main-menu li a,.header-top a{font-family:var(--secc-round);font-weight:700;color:var(--secc-ink)}
#main-menu li a:hover,#main-menu li a:focus,.header-top a:hover{color:var(--secc-teal);background:transparent}
#main-menu .active a,#main-menu .current-menu-item a{color:var(--secc-teal)}

/* Page title band — soft teal-tinted hero, centered, matching the homepage feel. */
.page-title{max-width:none;background:var(--secc-teal);border-bottom:0;padding:clamp(2.4rem,5vw,3.6rem) clamp(1.1rem,4vw,2.5rem);text-align:center}
.page-title h1{font-size:clamp(2rem,4vw,2.8rem);margin:0;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.2)}

/* Content: comfortable measure + spacing, sized to match the homepage. */
.content{font-size:17px;line-height:1.65;padding:clamp(2.5rem,6vw,4rem) 0 clamp(3rem,6vw,5rem)}
.content h2{font-size:clamp(1.6rem,3.4vw,2.2rem);margin:1.8em 0 .5em}
.content h3{font-size:clamp(1.25rem,2.4vw,1.55rem);margin:1.4em 0 .4em}
.content p{margin:0 0 1rem}
.content a{text-decoration:underline}

/* Footer — teal, matching the homepage footer (footer.php markup). */
footer{background:var(--secc-teal);color:#fff}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2rem;padding:clamp(3rem,6vw,4rem) 0 2rem}
footer h4{font-family:var(--secc-round);font-weight:800;font-size:1.12rem;margin:0 0 .8rem;color:#fff}
.foot-grid a{color:#fff;opacity:.9;text-decoration:none;display:block;margin-bottom:.5rem;font-size:.95rem}
.foot-grid a:hover,.foot-grid a:focus{opacity:1;text-decoration:underline}
.foot-bot{border-top:1px solid rgba(255,255,255,.28);padding:1.1rem 0 2.4rem;font-size:.82rem;opacity:.9;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.foot-bot a{color:#fff;text-decoration:underline}
.foot-contact{font-style:normal;opacity:.9;line-height:1.9;margin:0}
.foot-contact a{display:inline;margin:0;color:#fff;text-decoration:none;font-size:.95rem}
.foot-contact a:hover,.foot-contact a:focus{text-decoration:underline}
.foot-socials{display:flex;gap:.7rem;margin-top:.7rem}
.foot-socials a{display:inline-flex;margin:0;color:#fff;opacity:.9}
.foot-socials a:hover,.foot-socials a:focus{opacity:1;color:#fff}
.foot-socials svg{width:22px;height:22px;display:block}
.foot-bw{display:inline-block;margin-top:1rem;background:#fff;padding:.4rem .6rem;border-radius:10px;line-height:0}
.foot-bw img{height:26px;width:auto;display:block}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* About Us page */
.secc-about{max-width:52rem;margin-left:auto;margin-right:auto}
.secc-about .lead{font-size:1.2rem;line-height:1.6;color:var(--secc-ink)}
.secc-about h2{margin:1.8rem 0 .6rem}
.about-list{margin:.4rem 0 1rem;padding-left:1.2rem;display:grid;gap:.35rem}
.about-list li{color:var(--secc-soft)}

/* Contact page */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:1.4rem 0 2rem}
.contact-card{background:#fff;border:2px solid var(--secc-border);border-radius:16px;padding:1.2rem 1.3rem;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.contact-card h3{margin:0 0 .4rem;font-size:1.05rem}
.contact-card p{margin:0 0 .3rem;color:var(--secc-soft)}
.contact-socials a{margin-right:1rem}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}}

/* FAQ page */
.faq-item{border:1px solid var(--secc-border);border-radius:12px;margin:0 0 .7rem;background:#fff;overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:1rem 1.2rem;font-family:var(--secc-round);font-weight:700;font-size:1.02rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--secc-teal);font-weight:800;font-size:1.3rem;flex:none}
.faq-item[open] summary::after{content:"–"}
.faq-item[open] summary{border-bottom:1px solid var(--secc-border)}
.faq-answer{padding:.9rem 1.2rem 1.1rem}
.faq-answer p{margin:0;color:var(--secc-soft)}

/* Class detail pages */
/* Header band takes the classroom's door color, with white title text. */
.secc-class-title{border-bottom:0}
.secc-class-title h1{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3)}
/* Teacher cards run ~25% larger than the Our Team grid. */
.secc-class .team-grid{grid-template-columns:repeat(auto-fill,minmax(275px,1fr))}
.secc-class .class-age-lead{display:inline-block;font-family:var(--secc-round);font-weight:800;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.28);background:var(--class-color,var(--secc-teal));padding:.22rem .7rem;border-radius:99px;margin:0 0 1.2rem}
.secc-class h2{margin:1.6rem 0 .8rem}
.secc-class .placeholder{color:var(--secc-soft);font-style:italic}
/* Class intro: teacher card(s) on the left, classroom photo on the right —
   two equal-width columns, and the photo stretches to match the teacher
   card + bio height so the pair reads as two same-sized blocks. */
.class-intro{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:stretch;margin:.4rem 0 0}
.class-intro .team-grid{margin:0}
.class-intro .team-grid:only-child{grid-column:1 / -1} /* no photo set — teachers span full width */
.class-photo{margin:0;position:relative;overflow:hidden;border-radius:16px;box-shadow:0 2px 6px rgba(0,0,0,.06),0 14px 30px rgba(0,0,0,.09)}
/* Absolutely-positioned img fills the stretched block without inflating the
   grid row, so the photo matches the teacher card height and keeps loading="lazy". */
.class-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:700px){.class-intro{grid-template-columns:1fr}.class-photo{aspect-ratio:4/3}}
/* "Curriculum"-style panel in the class color, describing the room + a typical day. */
.class-panel{background:var(--class-color,var(--secc-teal));color:#fff;border-radius:24px;padding:clamp(1.6rem,4vw,2.6rem);margin:2rem 0 0;box-shadow:0 2px 6px rgba(0,0,0,.05),0 16px 34px rgba(0,0,0,.1)}
.class-panel h2{color:#fff;margin:0 0 .5rem}
.class-panel h2:not(:first-child){margin-top:1.6rem}
.class-panel p{color:rgba(255,255,255,.96);margin:0}
.class-schedule{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.7rem;color:#fff}
.class-schedule li{display:grid;grid-template-columns:9rem 1fr;gap:.2rem .9rem;align-items:baseline}
.class-schedule .cs-time{font-family:var(--secc-round);font-weight:800}
.class-schedule .cs-detail{display:block;opacity:.9;font-size:.92rem;margin-top:.1rem}
@media (max-width:520px){.class-schedule li{grid-template-columns:1fr;gap:.15rem}}
/* About page photo — full-width figure under the intro. */
.about-photo{margin:1.6rem 0 .4rem}
.about-photo img{width:100%;height:auto;display:block;border-radius:18px;box-shadow:0 2px 6px rgba(0,0,0,.06),0 16px 34px rgba(0,0,0,.1)}

/* Our Team page */
.secc-team h2{margin:1.6rem 0 1rem}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.3rem;margin:0 0 2rem;align-items:start}
.team-card{background:#fff;border:2px solid var(--secc-border);border-radius:18px;padding:1.1rem;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.05),0 12px 26px rgba(0,0,0,.07)}
.team-card .bio{margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--secc-border);text-align:left;font-size:.88rem;line-height:1.55;color:var(--secc-soft)}
.team-card .bio p{margin:0 0 .5rem} .team-card .bio p:last-child{margin:0}
.team-photo{aspect-ratio:1/1;border-radius:14px;background:var(--secc-alt);border:1px dashed #d7d7d7;display:grid;place-items:center;margin-bottom:.8rem}
.team-photo::before{content:"Photo coming soon";font-size:.72rem;color:var(--secc-soft);font-style:italic}
.team-photo.has-photo{background-size:cover;background-position:center 22%;border:0} /* bias toward the top so faces aren't cropped */
.team-photo.has-photo::before{content:none}
.team-card h3{margin:.2rem 0 .15rem;font-size:1.08rem}
.team-card .role{margin:0;color:var(--secc-soft);font-size:.85rem}
.team-note{color:var(--secc-soft);font-style:italic}
.secc-careers .btn{margin-top:.5rem}
/* Links to each class page, so Meet Our Team covers the teachers too. */
.class-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.8rem;margin:.6rem 0 2rem}
.class-link{display:flex;align-items:center;gap:.75rem;background:#fff;border:2px solid var(--secc-border);border-left:6px solid var(--class-color,var(--secc-teal));border-radius:14px;padding:.7rem .9rem;text-decoration:none;color:var(--secc-ink);transition:transform .15s ease,box-shadow .2s}
.class-link:hover,.class-link:focus-visible{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.class-link-heb{font-family:var(--secc-round);font-weight:800;font-size:1.7rem;line-height:1;color:var(--class-color,var(--secc-teal))}
.class-link strong{font-family:var(--secc-round);font-weight:800}

/* Accessible focus ring consistent with the homepage. */
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--secc-ink);outline-offset:2px}