/*!
Theme Name: Silicon Beach Montessori
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: silicon-beach-montessori
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Silicon Beach Montessori is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
:root {
  --gold: #8B6510;
  --golden-peel: #6B4F0D;
  --gold-light: #F5D87A;
  --gold-pale: #FDF3D0;
  --green: #5A8A5C;
  --green-light: #8FBC8F;
  --green-pale: #EAF4EA;
  --white: #FFFFFF;
  --cream: #FFFDF5;
  --brown: #5C3D1E;
  --text: #2E2416;
  --text-light: #5C3D1E;
  --shadow: 0 8px 32px rgba(90,60,20,0.10);
  --radius: 20px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'DM Sans',sans-serif; background:var(--cream); color:var(--text); overflow-x:hidden; }
body, html {
  max-width: 100%;
  overflow-x: hidden;
}
/* NAV */
nav { position:fixed; top:0; width:100%; z-index:1000; background:rgba(255,253,245,0.97); backdrop-filter:blur(12px); border-bottom:2px solid var(--gold-light); padding:0 5%; display:flex; align-items:center; justify-content:space-between; }
.nav-logo img { height:132px; mix-blend-mode:multiply;  }
.nav-links { display:flex; gap:28px; list-style:none; align-items:center; }
.nav-links.open li {
  padding-top: 12px;
}
.nav-links a { text-decoration:none; color:var(--text); font-size:0.88rem; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; transition:color 0.2s; }
.nav-links a:hover { color:var(--gold); }
.nav-cta { background:var(--gold); color:var(--white) !important; padding:8px 20px; border-radius:40px; font-weight:500 !important; transition:background 0.2s !important; }
.nav-cta:hover { background:var(--brown) !important; }
.hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  background:none;
  border:none;
  padding:4px;
  position: relative;
}

.hamburger span {
  width:26px;
  height:2px;
  background:var(--brown);
  display:block;
  border-radius:2px;
  transition:0.3s ease;
  transform-origin: center;
}

/* Make them overlap when active */
.hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
/* HERO */
.hero { min-height:100vh; background:linear-gradient(135deg,var(--gold-pale) 0%,#FFF8E0 40%,var(--green-pale) 100%); display:flex; align-items:center; padding:100px 5% 60px; position:relative; overflow:hidden; }
.hero{display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 2rem 80px;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(139,175,106,0.18) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(196,151,58,0.12) 0%,transparent 50%);}
.hero-decor{position:absolute;border-radius:50%;opacity:0.12;animation:floatDot 6s ease-in-out infinite;}
.d1{width:300px;height:300px;background:var(--green-light);top:-80px;left:-80px;animation-delay:0s;}
.d2{width:200px;height:200px;background:var(--gold);bottom:40px;right:-60px;animation-delay:2s;}
.d3{width:150px;height:150px;background:var(--golden-peel);top:30%;left:5%;animation-delay:4s;}
@keyframes floatDot{0%,100%{transform:translateY(0);}50%{transform:translateY(-20px);}}

/* .hero::before { content:''; position:absolute; top:-80px; right:-80px; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(212,160,23,0.18) 0%,transparent 70%); pointer-events:none; }
.hero::after { content:''; position:absolute; bottom:-60px; left:-60px; width:350px; height:350px; border-radius:50%; background:radial-gradient(circle,rgba(90,138,92,0.14) 0%,transparent 70%); pointer-events:none; } */
.hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; max-width:1200px; margin:0 auto; width:100%; position:relative; z-index:1; }
.hero-badge { display:inline-block; background:var(--green); color:var(--white); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; padding:6px 16px; border-radius:40px; margin-bottom:18px; font-weight:500; }
.hero h1 { font-family:'Playfair Display',serif; font-size:clamp(2.2rem,4vw,3.4rem); line-height:1.18; color:var(--brown); margin-bottom:18px; }
.hero h1 span { color:var(--gold); font-style:italic; }
.hero-sub { font-size:1rem; color:var(--text-light); line-height:1.7; margin-bottom:32px; max-width:520px; }
.hero-tagline { font-family:'Caveat',cursive; font-size:1.4rem; color:var(--green); margin-bottom:20px; }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; }
.btn-primary { background:var(--gold); color:var(--white); padding:14px 32px; border-radius:50px; text-decoration:none; font-weight:500; font-size:0.95rem; transition:background 0.2s,transform 0.2s; display:inline-block; }
.btn-primary:hover { background:var(--brown); transform:translateY(-2px); }
.btn-outline { background:transparent; color:var(--green); border:2px solid var(--green); padding:12px 28px; border-radius:50px; text-decoration:none; font-weight:500; font-size:0.95rem; transition:all 0.2s; display:inline-block; }
.btn-outline:hover { background:var(--green); color:var(--white); }
.hero-photos { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hero-photos img { width:100%; border-radius:var(--radius); box-shadow:var(--shadow); object-fit:cover; transition:transform 0.3s; }
.hero-photos img:hover { transform:scale(1.03); }
.hero-photos .hero-tall { height:360px; grid-row:span 2; }
.hero-photos .hero-short { height:166px; }
.hero {
  padding-top: 180px;
}
:root {
  --nav-height: 120px; /* fallback */
}

section {
  scroll-margin-top: var(--nav-height);
}
/* @media(max-width:900px){
  .hero {
    padding-top: 140px;
  }
} */
/* SECTIONS */
section { padding:80px 5%; }
.section-label { font-family:'Caveat',cursive; color:var(--green); font-size:1.2rem; margin-bottom:8px; display:block; }
.section-title { font-family:'Playfair Display',serif; font-size:clamp(1.8rem,3vw,2.6rem); color:var(--brown); margin-bottom:16px; }
.section-desc { color:var(--text-light); line-height:1.75; font-size:1rem; max-width:680px; }

/* STATS */
.stats-strip { background:var(--brown); padding:40px 5%; display:flex; justify-content:center; gap:60px; flex-wrap:wrap; }
.stat-item { text-align:center; }
.stat-num { font-family:'Playfair Display',serif; font-size:2.4rem; color:var(--gold-light); display:block; font-weight:700; }
.stat-label { font-size:0.82rem; color:rgba(255,255,255,0.92); text-transform:uppercase; letter-spacing:0.08em; }

/* ABOUT */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; max-width:1200px; margin:0 auto; }
.about-img-wrap { position:relative; }
.about-img-wrap img { width:100%; border-radius:var(--radius); box-shadow:var(--shadow); object-fit:cover; height:440px; }
/* .badge-float { position:absolute; bottom:-18px; right:-18px; background:var(--gold); color:var(--white); padding:14px 20px; border-radius:16px; font-family:'Playfair Display',serif; font-size:0.95rem; text-align:center; box-shadow:var(--shadow); }
.badge-float strong { display:block; font-size:1.5rem; } */
.about-text p { color:var(--text-light); line-height:1.8; margin-bottom:16px; font-size:1rem; }

/* MISSION */
.mission-bg { background:linear-gradient(135deg,var(--green-pale) 0%,var(--gold-pale) 100%); }
.mission-inner { max-width:900px; margin:0 auto; text-align:center; }
.mission-inner .section-desc { max-width:760px; margin:0 auto; font-size:1.05rem; }

/* SERVICES */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1200px; margin:40px auto 0; }
.service-card { background:var(--white); border-radius:var(--radius); padding:32px 28px; box-shadow:var(--shadow); border-top:4px solid var(--gold); transition:transform 0.2s,box-shadow 0.2s; }
.service-card:nth-child(even) { border-top-color:var(--green); }
.service-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(90,60,20,0.15); }
.service-icon { font-size:2.2rem; margin-bottom:14px; display:block; }
.service-card h3 { font-family:'Playfair Display',serif; font-size:1.2rem; color:var(--brown); margin-bottom:10px; }
.service-card p { color:var(--text-light); font-size:0.92rem; line-height:1.7; }

/* CLASSROOM */
.classroom-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:1200px; margin:40px auto 0; }
.classroom-gallery img { width:100%; border-radius:var(--radius); box-shadow:var(--shadow); object-fit:cover; transition:transform 0.3s; }
.classroom-gallery img:nth-child(1),.classroom-gallery img:nth-child(2),.classroom-gallery img:nth-child(3) { height:240px; }
.classroom-gallery img:nth-child(4) { grid-column:1/span 2; height:280px; }
.classroom-gallery img:nth-child(5) { grid-column:3; height:280px; }
.classroom-gallery img:hover { transform:scale(1.03); }

/* OUTDOOR */
.outdoor-bg { background:linear-gradient(135deg,var(--green-pale),var(--gold-pale)); }
.outdoor-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; max-width:1200px; margin:0 auto; }
.outdoor-photos { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.outdoor-photos img { width:100%; border-radius:var(--radius); object-fit:cover; height:220px; box-shadow:var(--shadow); transition:transform 0.3s; }
.outdoor-photos img:hover { transform:scale(1.03); }

/* PRETTY */
.pretty-grid { display:grid; grid-template-columns:320px 1fr; gap:60px; align-items:start; max-width:1100px; margin:0 auto; }
.pretty-photos { display:flex; flex-direction:column; gap:14px; }
.pretty-photos img { width:100%; border-radius:var(--radius); box-shadow:var(--shadow); object-fit:cover; }
.pretty-info p { color:var(--text-light); line-height:1.8; font-size:1rem; margin-bottom:16px; }
.pretty-badges { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; }
.badge { background:var(--gold-pale); border:1.5px solid var(--gold-light); color:var(--brown); font-size:0.8rem; padding:6px 14px; border-radius:30px; font-weight:500; }
.book-card { background:linear-gradient(135deg,var(--gold-pale),var(--green-pale)); border-radius:var(--radius); padding:24px; margin-top:24px; border:2px solid var(--gold-light); display:flex; gap:18px; align-items:center; }
.book-card .book-icon { font-size:3rem; flex-shrink:0; }
.book-card h4 { font-family:'Playfair Display',serif; color:var(--brown); font-size:1rem; margin-bottom:6px; }
.book-card p { font-size:0.88rem; color:var(--text-light); margin:0; }
.book-card a { display:inline-block; margin-top:10px; background:var(--gold); color:var(--white); padding:7px 18px; border-radius:30px; text-decoration:none; font-size:0.84rem; font-weight:500; transition:background 0.2s; }
.book-card a:hover { background:var(--brown); }

/* SAFETY */
.safety-bg { background:linear-gradient(135deg,var(--gold-pale),var(--green-pale)); }
.safety-inner { max-width:1000px; margin:0 auto; }
.safety-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:36px; }
.safety-item { background:var(--white); border-radius:var(--radius); padding:24px 20px; text-align:center; box-shadow:0 4px 16px rgba(90,60,20,0.08); }
.safety-item .s-icon { font-size:2rem; margin-bottom:10px; display:block; }
.safety-item h4 { font-family:'Playfair Display',serif; color:var(--brown); font-size:1rem; margin-bottom:8px; }
.safety-item p { font-size:0.88rem; color:var(--text-light); line-height:1.6; }

/* FORM */
.tour-bg { background:var(--brown); }
.tour-inner { max-width:700px; margin:0 auto; text-align:center; }
.tour-inner .section-title { color:var(--gold-light); }
.tour-inner .section-label { color:var(--green-light); }
.tour-inner .section-desc { color:rgba(255,255,255,0.75); margin:0 auto 36px; }
.tour-form { background:var(--cream); border-radius:var(--radius); padding:36px; text-align:left; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label { font-size:0.82rem; font-weight:500; color:var(--text); text-transform:uppercase; letter-spacing:0.06em; }
.form-group input,.form-group textarea,.form-group select { border:1.5px solid #DDD; border-radius:10px; padding:11px 14px; font-family:'DM Sans',sans-serif; font-size:0.95rem; color:var(--text); background:var(--white); transition:border-color 0.2s; outline:none; }
.form-group input:focus,.form-group textarea:focus,.form-group select:focus { border-color:var(--gold); }
.form-group textarea { resize:vertical; min-height:100px; }
.form-submit { width:100%; background:var(--gold); color:var(--white); border:none; padding:15px; border-radius:50px; font-size:1rem; font-weight:500; cursor:pointer; font-family:'DM Sans',sans-serif; transition:background 0.2s; margin-top:8px; }
.form-submit:hover { background:var(--green); }
.thank-you { display:none; text-align:center; padding:40px 20px; }
.thank-you .ty-icon { font-size:3.5rem; display:block; margin-bottom:14px; }
.thank-you h3 { font-family:'Playfair Display',serif; color:var(--brown); font-size:1.5rem; margin-bottom:10px; }
.thank-you p { color:var(--text-light); }

/* ADDRESS / FOOTER */
.address-strip { background:var(--gold-pale); border-top:2px solid var(--gold-light); border-bottom:2px solid var(--gold-light); padding:28px 5%; text-align:center; font-size:0.95rem; color:var(--text-light); line-height:2; }
.address-strip strong { color:var(--brown); }
.address-strip a { color:var(--green); text-decoration:none; }
footer { background:var(--text); color:rgba(255,255,255,0.92); padding:40px 5%; text-align:center; font-size:0.85rem; line-height:2; }
footer a { color:var(--gold-light); text-decoration:none; }

/* FLOATING BUTTONS */
.float-contact { position:fixed; bottom:28px; right:24px; display:flex; flex-direction:column; gap:12px; z-index:999; }
.float-btn { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:0 4px 18px rgba(0,0,0,0.20); transition:transform 0.2s,box-shadow 0.2s; }
.float-btn:hover { transform:scale(1.12); box-shadow:0 6px 24px rgba(0,0,0,0.25); }
.float-wa { background:#25D366; }
.float-sms { background:var(--gold); }
.float-mail { background:var(--green); }

/* ANIMATIONS */
.fade-up { opacity:0; transform:translateY(28px); transition:opacity 0.6s ease,transform 0.6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* PLAY-LEARN-GROW */
.plg-grid { display:flex; justify-content:center; gap:50px; flex-wrap:wrap; margin-top:44px; }
.plg-item { text-align:center; }
.plg-item .plg-icon { font-size:2.8rem; }
.plg-item h4 { font-family:'Playfair Display',serif; color:var(--brown); margin:12px 0 8px; font-size:1.1rem; }
.plg-item p { font-size:0.9rem; color:var(--text-light); max-width:160px; line-height:1.5; }

/* GRAD SECTION */
.grad-grid { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:300px 1fr; gap:50px; align-items:center; }
.grad-grid img { width:100%; border-radius:var(--radius); box-shadow:var(--shadow); object-fit:cover; height:360px; }
.mission-bg .wp-block-list li, .mission-bg p, .mission-bg img{
	text-align: justify;
	padding: 10px 25px;
	hyphens: auto;
	letter-spacing: 0.2px
}
.mission-bg .post-thumbnail {
  text-align: center;
  margin: 30px 0;
}

.mission-bg .post-thumbnail img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Optional: control width on large screens */
@media (min-width: 768px) {
  .post-thumbnail img {
    max-width: 700px; /* keeps it centered and not too wide */
  }
}
.blog-section {
  padding: 80px 5%;
  background: var(--cream);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.blog-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.2s;
}

.blog-card:hover {
  transform: translateY(-5px);
}

.blog-thumb img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.blog-content {
  padding: 20px;
}

.blog-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.blog-title a {
  text-decoration: none;
  color: var(--brown);
}

.blog-excerpt {
  font-size: 0.9rem;
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: 14px;
}

/* Responsive */
@media(max-width:900px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:600px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}
/* RESPONSIVE */
@media(max-width:900px) {
  .hero-inner { grid-template-columns:1fr; gap:36px; }
  .hero-photos { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .hero-photos .hero-tall { height:220px; grid-row:auto; }
  .hero-photos .hero-short { height:100px; }
  .about-grid,.outdoor-grid,.pretty-grid,.grad-grid { grid-template-columns:1fr; }
  .pretty-photos { flex-direction:row; }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .safety-grid { grid-template-columns:repeat(2,1fr); }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .nav-links.open { display:flex; flex-direction:column; gap:0; position:fixed; top:135px; left:0; right:0; background:var(--cream); border-bottom:2px solid var(--gold-light); padding:20px 5%; z-index:999; }
  .classroom-gallery { grid-template-columns:1fr 1fr; }
  .classroom-gallery img:nth-child(4) { grid-column:1/span 2; }
  .classroom-gallery img:nth-child(5) { grid-column:1/span 2; height:240px; }
  .stats-strip { gap:30px; }
  /* .badge-float { bottom:-10px; right:-10px; } */
}

@media (max-width: 768px) {

  .pretty-photos {
    display: flex;
    gap: 10px;
  }

  .pretty-photos img {
    width: 50%;
    height: auto !important;
  }

}
@media (max-width: 768px) {
  .hero-section {
    padding-top: 90px;
  }
}

@media(max-width:600px) {
/*   .hero { padding:125px 4% 50px; } */
  .hero-photos { grid-template-columns:1fr 1fr; }
  .services-grid { grid-template-columns:1fr; }
  .safety-grid { grid-template-columns:1fr 1fr; }
  .classroom-gallery { grid-template-columns:1fr; }
  .classroom-gallery img { height:220px !important; grid-column:1 !important; }
  .outdoor-photos { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .stats-strip { gap:20px; padding:30px 4%; }
  .plg-grid { gap:28px; }
  .grad-grid { grid-template-columns:1fr; }
}