/*
Theme Name: Vincent Public School
Theme URI: https://example.com
Author: Vincent Public School
Author URI: https://example.com
Description: A one-page-style WordPress theme for Vincent Public School, Marar, Ramgarh, with a built-in blog section. Built around the school's crest and motto, with a dawn palette of navy, maroon and gold.
Version: 1.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: vincent-public-school
*/

:root{
  --ink:#141e33;        /* dawn-sky navy */
  --ink-2:#1c2a47;
  --maroon:#7a1b2b;     /* crest border */
  --maroon-2:#8f2233;
  --gold:#e2a53f;       /* sunrise / flame */
  --gold-soft:#f1cc86;
  --forest:#1e4c3d;     /* crest ribbon green */
  --paper:#faf5ea;      /* warm paper background */
  --paper-2:#f2ead9;
  --ink-text:#241d16;
  --muted:#6b6355;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:'Work Sans', sans-serif;
  color:var(--ink-text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  margin:0;
}

h1,h2,h3,h4,.display-font{
  font-family:'Fraunces', serif;
  letter-spacing:-0.01em;
}

a{text-decoration:none;}
img{max-width:100%; height:auto;}

.btn{border-radius:2px; font-weight:600; padding:.65rem 1.6rem; letter-spacing:.01em; display:inline-block;}
.btn-gold{background:var(--gold); color:var(--ink); border:1px solid var(--gold);}
.btn-gold:hover{background:#cf9330; color:var(--ink); border-color:#cf9330;}
.btn-outline-light2{border:1px solid rgba(255,255,255,.55); color:#fff;}
.btn-outline-light2:hover{background:rgba(255,255,255,.1); color:#fff;}
.btn-maroon{background:var(--maroon); color:#fff; border:1px solid var(--maroon);}
.btn-maroon:hover{background:#5f1521; color:#fff; border-color:#5f1521;}

/* ---------- NAV ---------- */
.navbar{
  padding:.85rem 0;
  background:transparent;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.navbar.scrolled{
  background:var(--ink);
  box-shadow:0 6px 24px rgba(0,0,0,.18);
  padding:.5rem 0;
}
.navbar:not(.scrolled).inner-page{background:var(--ink);}
.navbar-brand{display:flex; align-items:center; gap:.65rem;}
.navbar-brand img{height:44px; width:44px; border-radius:50%; object-fit:cover;}
.brand-text{line-height:1.05;}
.brand-text .name{font-family:'Fraunces',serif; font-weight:600; font-size:1.05rem; color:#fff;}
.brand-text .place{font-size:.68rem; color:var(--gold-soft); letter-spacing:.04em;}
.nav-link{color:rgba(255,255,255,.85) !important; font-weight:500; font-size:.93rem; margin:0 .5rem;}
.nav-link:hover, .nav-link.current{color:var(--gold) !important;}
.nav-call{
  display:flex; align-items:center; gap:.4rem;
  color:#fff; border:1px solid rgba(255,255,255,.4);
  padding:.4rem .9rem; border-radius:2px; font-size:.85rem; font-weight:600;
}
.nav-call:hover{border-color:var(--gold); color:var(--gold);}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--ink);
}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center 30%;
  animation:slowzoom 22s ease-in-out infinite alternate;
}
@keyframes slowzoom{ from{transform:scale(1);} to{transform:scale(1.07);} }
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,30,51,.55) 0%, rgba(20,30,51,.35) 35%, rgba(20,30,51,.92) 100%),
    linear-gradient(100deg, rgba(122,27,43,.55) 0%, rgba(20,30,51,0) 45%);
}
.hero-sun{
  position:absolute; right:6%; top:14%;
  width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, var(--gold-soft), var(--gold) 45%, rgba(226,165,63,0) 72%);
  filter:blur(2px);
  opacity:.55;
}
.hero-inner{position:relative; z-index:2; width:100%; padding-bottom:4.5rem;}
.hero-eyebrow{
  color:var(--gold-soft);
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:1.15rem;
  margin-bottom:.4rem;
}
.hero h1{
  color:#fff;
  font-weight:600;
  font-size:clamp(2.4rem, 5.6vw, 4.6rem);
  line-height:1.02;
  margin-bottom:.9rem;
}
.hero h1 span{color:var(--gold);}
.hero-sub{
  color:rgba(255,255,255,.88);
  font-size:1.08rem;
  max-width:34rem;
  margin-bottom:1.9rem;
}
.hero-facts{
  display:flex; flex-wrap:wrap; gap:1.9rem;
  border-top:1px solid rgba(255,255,255,.22);
  padding-top:1.3rem; margin-top:2rem;
}
.hero-facts div{color:rgba(255,255,255,.72); font-size:.82rem;}
.hero-facts strong{display:block; color:#fff; font-family:'Fraunces',serif; font-size:1.5rem; font-weight:600;}
.scroll-cue{
  position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%);
  color:rgba(255,255,255,.6); font-size:.72rem; letter-spacing:.15em;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  z-index:2;
}
.scroll-cue .line{width:1px; height:34px; background:linear-gradient(180deg, rgba(255,255,255,.8), transparent);}

/* ---------- PAGE HEADER (inner pages: blog, single, page) ---------- */
.page-header-band{
  background:var(--ink);
  padding:9rem 0 3.5rem;
  color:#fff;
  position:relative;
}
.page-header-band .section-tag{color:var(--gold-soft);}
.page-header-band h1{color:#fff; font-weight:600; margin-bottom:.4rem;}
.page-header-band p{color:rgba(255,255,255,.7); margin:0;}

/* ---------- SECTION HELPERS ---------- */
section{padding:5.5rem 0;}
.section-tag{
  color:var(--maroon);
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:1.1rem;
  margin-bottom:.3rem;
}
.section-title{font-weight:600; font-size:clamp(1.8rem, 3vw, 2.6rem); margin-bottom:1.1rem;}
.lede{color:var(--muted); font-size:1.05rem; max-width:42rem;}
hr.rule{border:none; border-top:1px solid #e4d9c2; margin:0;}

/* ---------- ABOUT ---------- */
.about{background:var(--paper);}
.about-photo{position:relative; border-radius:2px; overflow:hidden;}
.about-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.about-photo::after{
  content:"";
  position:absolute; inset:0;
  border:1px solid rgba(255,255,255,.35);
  margin:14px;
  pointer-events:none;
}
.about-motto{
  background:var(--ink);
  color:#fff;
  padding:1.6rem 1.8rem;
  margin-top:-3.2rem;
  margin-left:1.6rem;
  max-width:20rem;
  position:relative;
  z-index:2;
  border-left:4px solid var(--gold);
}
.about-motto .deva{font-family:'Fraunces',serif; font-size:1.15rem; color:var(--gold-soft); margin-bottom:.3rem;}
.about-motto .translit{font-size:.85rem; color:rgba(255,255,255,.75); font-style:italic;}

.about-list{list-style:none; padding:0; margin:1.6rem 0 0;}
.about-list li{
  display:flex; gap:.8rem; padding:.8rem 0;
  border-bottom:1px solid #e4d9c2;
  font-size:.98rem;
}
.about-list li:first-child{padding-top:0;}
.about-list .mark{color:var(--maroon); font-family:'Fraunces',serif; font-weight:600; font-size:1.05rem; min-width:1.4rem;}

/* ---------- PROGRAMS ---------- */
.programs{background:var(--ink); color:#fff; position:relative;}
.programs .section-tag{color:var(--gold-soft);}
.programs .lede{color:rgba(255,255,255,.7);}
.program-main{
  background:linear-gradient(150deg, var(--maroon), var(--maroon-2));
  padding:2.6rem;
  height:100%;
  position:relative;
  overflow:hidden;
}
.program-main h3{color:#fff; font-size:1.7rem; margin-bottom:.8rem;}
.program-main p{color:rgba(255,255,255,.85);}
.program-main .stage-badge{
  display:inline-block; font-size:.78rem; letter-spacing:.04em;
  color:var(--gold-soft); border:1px solid rgba(255,255,255,.35);
  padding:.3rem .8rem; margin-bottom:1.1rem;
}
.stream-row{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem;}
.stream-row span{background:rgba(255,255,255,.12); padding:.35rem .8rem; font-size:.82rem; color:#fff;}
.program-side{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  padding:2rem;
  height:100%;
  display:flex; flex-direction:column;
}
.program-side img{width:100%; height:150px; object-fit:cover; margin-bottom:1.2rem;}
.program-side h4{color:#fff; font-size:1.25rem; margin-bottom:.6rem;}
.program-side p{color:rgba(255,255,255,.72); font-size:.94rem; flex-grow:1;}

/* ---------- HIGHLIGHTS ---------- */
.highlights{background:var(--paper-2);}
.highlight-row{display:flex; align-items:center; gap:2rem; padding:1.7rem 0; border-bottom:1px solid #e4d9c2;}
.highlight-row:last-child{border-bottom:none;}
.highlight-row .h-thumb{width:96px; height:96px; flex:0 0 auto; border-radius:50%; overflow:hidden; border:2px solid var(--gold);}
.highlight-row .h-thumb img{width:100%; height:100%; object-fit:cover;}
.highlight-row .h-text h4{font-size:1.15rem; margin-bottom:.25rem;}
.highlight-row .h-text p{color:var(--muted); margin:0; font-size:.95rem;}
.highlight-row:nth-child(even){flex-direction:row-reverse; text-align:right;}
.highlight-row:nth-child(even) .h-text{text-align:right;}

/* ---------- GALLERY ---------- */
.gallery{background:var(--paper);}
.g-grid{display:grid; grid-template-columns:repeat(6, 1fr); grid-auto-rows:150px; gap:8px;}
.g-item{position:relative; overflow:hidden; cursor:pointer;}
.g-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
.g-item:hover img{transform:scale(1.06);}
.g-item .g-cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:.5rem .7rem .45rem;
  background:linear-gradient(0deg, rgba(20,30,51,.85), rgba(20,30,51,0));
  color:#fff; font-size:.78rem; font-weight:500;
  opacity:0; transition:opacity .3s ease;
}
.g-item:hover .g-cap{opacity:1;}
.g1{grid-column:span 3; grid-row:span 2;}
.g2{grid-column:span 3; grid-row:span 1;}
.g3{grid-column:span 3; grid-row:span 1;}
.g4{grid-column:span 2; grid-row:span 1;}
.g5{grid-column:span 2; grid-row:span 1;}
.g6{grid-column:span 2; grid-row:span 1;}

/* ---------- BLOG (home page preview + archive + single) ---------- */
.blog-section{background:var(--paper-2);}
.blog-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.8rem;}
.blog-card{background:#fff; border:1px solid #e4d9c2; display:flex; flex-direction:column; height:100%;}
.blog-card .b-thumb{height:190px; overflow:hidden; background:var(--ink);}
.blog-card .b-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
.blog-card:hover .b-thumb img{transform:scale(1.06);}
.blog-card .b-body{padding:1.4rem; display:flex; flex-direction:column; flex-grow:1;}
.blog-card .b-date{color:var(--maroon); font-size:.78rem; letter-spacing:.05em; margin-bottom:.5rem; text-transform:uppercase;}
.blog-card h3{font-size:1.2rem; margin-bottom:.6rem; line-height:1.25;}
.blog-card h3 a{color:var(--ink-text);}
.blog-card h3 a:hover{color:var(--maroon);}
.blog-card p{color:var(--muted); font-size:.92rem; flex-grow:1;}
.blog-card .b-more{font-size:.85rem; font-weight:600; color:var(--maroon); margin-top:.6rem;}
.blog-card .b-more:hover{color:var(--maroon-2); text-decoration:underline;}

.blog-list-item{display:flex; gap:1.8rem; padding:2rem 0; border-bottom:1px solid #e4d9c2;}
.blog-list-item .bl-thumb{width:220px; height:160px; flex:0 0 auto; overflow:hidden; background:var(--ink);}
.blog-list-item .bl-thumb img{width:100%; height:100%; object-fit:cover;}
.blog-list-item .bl-body .b-date{color:var(--maroon); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; margin-bottom:.4rem;}
.blog-list-item h2{font-size:1.5rem; margin-bottom:.5rem;}
.blog-list-item h2 a{color:var(--ink-text);}
.blog-list-item h2 a:hover{color:var(--maroon);}
.blog-list-item p{color:var(--muted);}

.single-post-header{max-width:46rem; margin:0 auto;}
.single-post-content{max-width:46rem; margin:0 auto; font-size:1.05rem; line-height:1.75;}
.single-post-content img{margin:1.5rem 0; border-radius:2px;}
.single-post-content h2{font-size:1.6rem; margin-top:2rem;}
.single-post-content h3{font-size:1.3rem; margin-top:1.6rem;}
.single-post-content blockquote{border-left:4px solid var(--gold); margin:1.6rem 0; padding:.4rem 0 .4rem 1.4rem; color:var(--muted); font-style:italic;}
.single-post-meta{color:var(--muted); font-size:.9rem; margin-bottom:2rem; max-width:46rem; margin-left:auto; margin-right:auto;}
.single-post-meta span{margin-right:1.2rem;}

.site-pagination{display:flex; justify-content:center; gap:.5rem; margin-top:3rem;}
.site-pagination a, .site-pagination span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.4rem; height:2.4rem; padding:0 .7rem;
  border:1px solid #e4d9c2; color:var(--ink-text); font-size:.9rem;
}
.site-pagination a:hover{background:var(--ink); color:#fff; border-color:var(--ink);}
.site-pagination span.current{background:var(--maroon); color:#fff; border-color:var(--maroon);}

.comments-area{max-width:46rem; margin:3rem auto 0;}
.comments-area .comment-list{list-style:none; padding:0;}
.comments-area .comment-body{border-bottom:1px solid #e4d9c2; padding:1.2rem 0;}
.comments-area .comment-author{font-weight:600; margin-right:.6rem;}
.comments-area .comment-metadata{color:var(--muted); font-size:.82rem;}
.no-results{max-width:36rem; margin:0 auto; text-align:center; color:var(--muted);}

/* ---------- CONTACT ---------- */
.contact{background:var(--ink); color:#fff;}
.contact .section-tag{color:var(--gold-soft);}
.contact-card{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); padding:2rem; height:100%;}
.contact-card .lbl{color:var(--gold-soft); font-size:.78rem; letter-spacing:.05em; margin-bottom:.3rem; display:block;}
.contact-card a, .contact-card p{color:#fff; font-size:1.02rem;}
.contact-card p{margin-bottom:1.3rem;}
.contact-card a{border-bottom:1px solid rgba(255,255,255,.25);}
.contact-card a:hover{color:var(--gold); border-color:var(--gold);}
.enroll-box{background:linear-gradient(135deg, var(--maroon), var(--maroon-2)); padding:2.4rem; height:100%; display:flex; flex-direction:column; justify-content:center;}
.enroll-box h3{color:#fff; margin-bottom:.7rem;}
.enroll-box p{color:rgba(255,255,255,.85); margin-bottom:1.5rem;}

/* ---------- FOOTER ---------- */
footer.site-footer{background:#0f1626; color:rgba(255,255,255,.65); padding:2.6rem 0 1.6rem;}
footer.site-footer .f-brand{display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem;}
footer.site-footer .f-brand img{height:38px; width:38px; border-radius:50%;}
footer.site-footer .f-brand span{font-family:'Fraunces',serif; color:#fff; font-size:1.05rem; font-weight:600;}
footer.site-footer a{color:rgba(255,255,255,.65);}
footer.site-footer a:hover{color:var(--gold);}
footer.site-footer .fine{font-size:.8rem; border-top:1px solid rgba(255,255,255,.1); margin-top:2rem; padding-top:1.2rem;}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991.98px){
  .about-motto{margin-left:0; margin-top:-2.2rem;}
  .g-grid{grid-template-columns:repeat(4,1fr); grid-auto-rows:130px;}
  .g1{grid-column:span 4; grid-row:span 2;}
  .g2,.g3{grid-column:span 4; grid-row:span 1;}
  .g4,.g5,.g6{grid-column:span 2; grid-row:span 1;}
  .highlight-row:nth-child(even){flex-direction:row; text-align:left;}
  .highlight-row:nth-child(even) .h-text{text-align:left;}
  .blog-grid{grid-template-columns:repeat(2, 1fr);}
  .blog-list-item{flex-direction:column;}
  .blog-list-item .bl-thumb{width:100%; height:200px;}
}
@media (max-width: 575.98px){
  .hero{min-height:92vh;}
  .g-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:120px;}
  .g1{grid-column:span 2; grid-row:span 2;}
  .g2,.g3,.g4,.g5,.g6{grid-column:span 2; grid-row:span 1;}
  section{padding:3.6rem 0;}
  .hero-facts{gap:1.2rem;}
  .blog-grid{grid-template-columns:1fr;}
  .page-header-band{padding-top:7.5rem;}
}

@media (prefers-reduced-motion: reduce){
  .hero-bg{animation:none;}
  *{scroll-behavior:auto !important;}
}