/* ==========================================================================
   BS Mathematics and Science Teaching — Site Styles
   Minimalist academic theme, UP/UPLB color language
   Accessible, responsive, mobile-first
   ========================================================================== */

:root{
  --up-maroon: #7C1D2E;
  --up-maroon-dark: #5E1522;
  --up-forest: #1B4D3E;
  --up-gold: #C9A227;
  --ink: #1E1D1B;
  --ink-soft: #5B5952;
  --ink-faint: #8A867B;
  --paper: #FFFFFF;
  --paper-alt: #FAF8F4;
  --line: #E6E1D6;
  --focus: #1A5FB4;
  --max-width: 1120px;
  --font-serif: Palatino, 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --font-sans: -apple-system, 'Segoe UI', Arial, Helvetica, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-serif);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--up-maroon-dark); text-underline-offset: 2px; }
a:hover{ color: var(--up-maroon); }
.main-nav a, .btn, .brand, .news-link, .text-link{ text-decoration: none; }
p{ color: var(--ink-soft); }

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background: var(--up-maroon); color:#fff; padding:.75rem 1.25rem;
  z-index:1000;
}
.skip-link:focus{ left:0; top:0; }

:focus-visible{ outline: 2px solid var(--focus); outline-offset: 3px; }

.container{ max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }

/* ---------- Top utility bar ---------- */
.utility-bar{ background: var(--up-forest); color: #dce6df; font-size: .76rem; }
.utility-bar .container{ display:flex; justify-content:space-between; align-items:center; padding-top:.4rem; padding-bottom:.4rem; flex-wrap:wrap; gap:.25rem; }
.utility-bar a{ color:#dce6df; text-decoration:none; margin-right:1.25rem; opacity:.9; transition: opacity .15s var(--ease); }
.utility-bar a:hover, .utility-bar a:focus{ opacity:1; text-decoration:underline; }

/* ---------- Header ---------- */
.site-header{ background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 500; }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; padding-top: .85rem; padding-bottom:.85rem; gap: 1.5rem; }
.brand{ display:flex; align-items:center; gap:.75rem; color: var(--ink); }
.brand-mark{
  width:42px; height:42px; background: var(--up-maroon); color: var(--up-gold);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-serif); font-weight:bold; font-size:.95rem; flex-shrink:0;
}
.brand-text .brand-title{ font-family: var(--font-serif); font-weight:bold; font-size:1rem; line-height:1.25; margin:0; color: var(--ink); }
.brand-text .brand-sub{ font-family: var(--font-sans); font-size:.72rem; color: var(--ink-faint); margin:0; letter-spacing:.02em; }

.nav-toggle{
  display:none; background: none; color: var(--ink); border:1px solid var(--line);
  padding:.5rem .75rem; font-size:.85rem; cursor:pointer; font-family: var(--font-sans);
}
.nav-toggle:hover{ border-color: var(--up-maroon); color: var(--up-maroon); }

.main-nav ul{ list-style:none; display:flex; gap:1.75rem; margin:0; padding:0; flex-wrap:wrap; }
.main-nav a{
  display:block; padding:.25rem 0; color: var(--ink-soft);
  font-family: var(--font-sans); font-weight:600; font-size:.85rem; letter-spacing:.01em;
  position:relative;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:2px; background: var(--up-maroon);
  transition: right .2s var(--ease);
}
.main-nav a:hover, .main-nav a:focus{ color: var(--ink); }
.main-nav a:hover::after, .main-nav a:focus::after{ right:0; }
.main-nav a[aria-current="page"]{ color: var(--up-maroon-dark); }
.main-nav a[aria-current="page"]::after{ right:0; }

/* ---------- Hero ---------- */
.hero{ padding: 5.5rem 0 4rem; }
.hero-inner{ max-width: 720px; }
.hero h1{ font-family: var(--font-serif); font-weight:normal; font-size: clamp(2rem, 5vw, 3.1rem); margin:0 0 1.1rem; line-height:1.2; color: var(--ink); letter-spacing:-.01em; }
.hero p{ font-size:1.1rem; max-width: 56ch; margin: 0 0 2rem; color: var(--ink-soft); }
.hero-badge{
  display:inline-block; color: var(--up-forest); font-family: var(--font-sans);
  font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1.25rem;
  padding-bottom:.5rem; border-bottom: 2px solid var(--up-gold);
}
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom: 3.5rem; }
.hero-stats{ display:flex; flex-wrap:wrap; gap: 2.5rem; padding-top: 2.25rem; border-top: 1px solid var(--line); }
.hero-stats > div{ display:flex; flex-direction:column; gap:.15rem; }
.hero-stats .stat{ font-family: var(--font-serif); font-size:1.6rem; color: var(--up-maroon-dark); line-height:1; }
.hero-stats .stat-label{ font-family: var(--font-sans); font-size:.78rem; color: var(--ink-faint); max-width:16ch; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding:.75rem 1.5rem;
  font-family: var(--font-sans); font-weight:600; font-size:.88rem; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.btn:active{ transform: scale(.97); }
.btn-primary{ background: var(--up-maroon); color:#fff; border-color: var(--up-maroon); }
.btn-primary:hover, .btn-primary:focus{ background: var(--up-maroon-dark); border-color: var(--up-maroon-dark); }
.btn-outline{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover, .btn-outline:focus{ border-color: var(--up-maroon); color: var(--up-maroon); }
.btn-maroon{ background: var(--up-maroon); color:#fff; border-color: var(--up-maroon); }
.btn-maroon:hover, .btn-maroon:focus{ background: var(--up-maroon-dark); }
.btn-small{ padding:.5rem 1rem; font-size:.8rem; }
.btn-block{ display:block; width:100%; text-align:center; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

.text-link{ font-family: var(--font-sans); font-size:.85rem; font-weight:600; color: var(--up-maroon-dark); white-space:nowrap; }
.text-link span{ display:inline-block; transition: transform .2s var(--ease); }
.text-link:hover span{ transform: translateX(3px); }

/* ---------- Sections ---------- */
section{ padding: 5rem 0; }
.section-alt{ background: var(--paper-alt); }
.section-head-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; margin-bottom: 2.5rem; flex-wrap:wrap; }
.section-head-row .section-title{ margin-bottom:0; }
.section-title{
  font-family: var(--font-serif); color: var(--ink); font-weight:normal;
  font-size: clamp(1.4rem, 2.8vw, 1.85rem); margin: 0 0 .85rem; letter-spacing:-.01em;
}
.section-lead{ max-width: 68ch; color: var(--ink-soft); margin-bottom: 3rem; font-size:1.02rem; }
.eyebrow{ color: var(--up-forest); font-family: var(--font-sans); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; display:block; margin-bottom:.6rem; }

.grid{ display:grid; gap: 2.5rem 2rem; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

.card{ padding:0; }
.card h3{ font-family: var(--font-serif); font-weight:normal; font-size:1.15rem; color: var(--ink); margin:0 0 .5rem; }
.card p{ font-size:.96rem; margin:0; }
.card-icon{
  color: var(--up-gold); font-family: var(--font-serif); font-weight:bold;
  font-size:.85rem; letter-spacing:.05em; margin-bottom:.9rem; display:block;
}

.callout{
  background: var(--up-forest); color:#fff; padding:2.5rem;
  display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap;
}
.callout h2{ font-family: var(--font-serif); font-weight:normal; font-size:1.5rem; margin:0 0 .4rem; }
.callout p{ margin:0; color:#d6e3da; }

table{ border-collapse: collapse; width:100%; background:#fff; }
caption{ text-align:left; font-weight:700; margin-bottom:.75rem; color: var(--ink); font-family: var(--font-sans); font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; }
th, td{ border-bottom:1px solid var(--line); padding:.85rem .75rem; text-align:left; vertical-align:top; }
th{ font-family: var(--font-sans); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; color: var(--ink-soft); }
.table-wrap{ overflow-x:auto; }

.accordion-item{ border-bottom:1px solid var(--line); }
.accordion-trigger{
  width:100%; text-align:left; background: none; border:none; padding:1.1rem 0;
  font-family: var(--font-sans); font-weight:600; font-size:.95rem; color: var(--ink); cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; transition: color .15s var(--ease);
}
.accordion-trigger:hover{ color: var(--up-maroon-dark); }
.accordion-trigger::after{ content:"+"; font-size:1.2rem; color: var(--up-gold); transition: transform .2s var(--ease); }
.accordion-trigger[aria-expanded="true"]::after{ transform: rotate(45deg); }
.accordion-panel{ padding: 0; max-height:0; overflow:hidden; transition: max-height .3s var(--ease), padding .3s var(--ease); }
.accordion-panel.is-open{ padding:0 0 1.1rem; max-height:600px; }

.people-card{ text-align:left; }
.people-avatar{ width:2.5rem; height:2px; background: var(--up-gold); margin:0 0 1.1rem; display:block; }

.news-list{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.news-list-preview{ grid-template-columns: repeat(3, 1fr); }
.news-card{ display:flex; flex-direction:column; }
.news-card time{ display:block; color: var(--up-forest); font-family: var(--font-sans); font-weight:700; font-size:.72rem; margin-bottom:.6rem; text-transform:uppercase; letter-spacing:.05em; }
.news-card h3{ font-family: var(--font-serif); font-weight:normal; font-size:1.1rem; margin:0 0 .6rem; color: var(--ink); }
.news-card p{ font-size:.92rem; margin:0 0 .75rem; }
.news-link{ font-family: var(--font-sans); font-size:.82rem; font-weight:600; color: var(--up-maroon-dark); margin-top:auto; }
.news-link span{ display:inline-block; transition: transform .2s var(--ease); }
.news-link:hover span{ transform: translateX(3px); }
.news-card[hidden]{ display:none; }

/* ---------- Forms ---------- */
.form-field{ margin-bottom:1.4rem; }
.form-field label{ display:block; font-weight:600; margin-bottom:.4rem; font-size:.9rem; }
.form-field .hint{ font-size:.8rem; color: var(--ink-faint); margin-top:.3rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea, select{
  width:100%; padding:.7rem .8rem; border:1px solid var(--line);
  font-family: var(--font-sans); font-size:.95rem; background:#fff; color: var(--ink);
  transition: border-color .15s var(--ease);
}
textarea{ min-height:130px; resize:vertical; }
input:focus, textarea:focus, select:focus{ border-color: var(--focus); }
fieldset{ border:1px solid var(--line); padding:1.25rem; }
legend{ font-family: var(--font-sans); font-weight:700; padding:0 .5rem; color: var(--ink); font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; }
.required-mark{ color: var(--up-maroon); }
.form-status{ padding:.8rem 1rem; margin-bottom:1rem; font-family: var(--font-sans); font-weight:600; font-size:.88rem; }
.form-status.success{ background:#eaf3ec; color:#1e4d2b; border-left:3px solid #1e4d2b; }
.form-status.error{ background:#fbeced; color:#7b1113; border-left:3px solid #7b1113; }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip: rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{ padding:1rem 0; font-family: var(--font-sans); font-size:.8rem; }
.breadcrumb ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.35rem; margin:0; padding:0; color: var(--ink-faint); }
.breadcrumb li:not(:last-child)::after{ content:"/"; margin-left:.35rem; color: var(--ink-faint); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--up-maroon-dark); color:#e6dfd2; padding: 4rem 0 1.5rem; margin-top:2rem; }
.site-footer a{ color:#e6dfd2; opacity:.85; transition: opacity .15s var(--ease); }
.site-footer a:hover{ opacity:1; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:2.5rem; margin-bottom:2.5rem; }
.site-footer h2{ font-family: var(--font-sans); font-size:.75rem; text-transform:uppercase; letter-spacing:.07em; color: var(--up-gold); margin:0 0 1rem; font-weight:700; }
.site-footer ul{ list-style:none; padding:0; margin:0; font-size:.9rem; }
.site-footer li{ margin-bottom:.65rem; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.15); padding-top:1.25rem; font-family: var(--font-sans); font-size:.76rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; opacity:.75; }

/* ---------- Headings & body text defaults ---------- */
h1, h2, h3, h4{ font-family: var(--font-serif); font-weight: normal; }

/* ---------- Utility ---------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.stack{ display:flex; flex-direction:column; gap:.5rem; }

/* ---------- Scroll-reveal animation ---------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .grid-3, .grid-4, .news-list, .news-list-preview{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .nav-toggle{ display:inline-block; }
  .main-nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:#fff; border-bottom:1px solid var(--line);
  }
  .main-nav.is-open{ display:block; }
  .main-nav ul{ flex-direction:column; padding: .5rem 1.5rem 1rem; gap:0; }
  .main-nav a{ padding:.85rem 0; border-bottom:1px solid var(--line); }
  .main-nav a::after{ display:none; }
  .grid-2, .grid-3, .grid-4, .news-list, .news-list-preview{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .callout{ flex-direction:column; align-items:flex-start; }
  .site-header .container{ flex-wrap:wrap; }
  .hero{ padding: 3.5rem 0 2.5rem; }
  section{ padding: 3.25rem 0; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* Admin-specific tweaks live in admin.css */