/* =====================================================================
   SUNRISE PUBLIC SCHOOL — Design System
   Palette: Indigo (primary) / Marigold (accent) / Cream (surface) / Sage (secondary)
   Type: Fraunces (display) + Inter (body) + Space Grotesk (utility/nav)
===================================================================== */

:root{
  --indigo: #1B2A4A;
  --indigo-deep: #121d34;
  --marigold: #E8923C;
  --marigold-deep: #c97623;
  --cream: #FBF7EF;
  --cream-dim: #F2ECDF;
  --ink: #1A1A1A;
  --ink-soft: #4b4b48;
  --sage: #7A9B76;
  --sage-deep: #5d7a59;
  --white: #ffffff;
  --line: #e3dccb;
  --radius: 10px;
  --shadow-card: 0 6px 24px rgba(27,42,74,0.08);
  --shadow-lift: 0 14px 34px rgba(27,42,74,0.16);
  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --font-utility: 'Space Grotesk', sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }
:focus-visible{ outline: 3px solid var(--marigold); outline-offset: 2px; }

h1,h2,h3,h4,h5{ font-family: var(--font-display); font-weight:600; color: var(--indigo); margin:0 0 .5em; line-height:1.2; }
p{ margin:0 0 1em; }

.eyebrow{
  font-family: var(--font-utility);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  color: var(--marigold-deep);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{ content:''; width:18px; height:2px; background:var(--marigold); display:inline-block; }

.section{ padding: 72px 0; }
.section-tight{ padding: 44px 0; }
.section-head{ max-width: 680px; margin-bottom: 40px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.rule-double{
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--indigo) 0 18px, transparent 18px 24px);
  opacity:.5;
  margin: 10px 0 0;
  max-width: 140px;
}
.center .rule-double{ margin-left:auto; margin-right:auto; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-utility); font-weight:600; font-size:.92rem;
  padding: 13px 26px; border-radius: 999px; border: 2px solid transparent;
  cursor:pointer; transition: all .2s ease;
}
.btn-primary{ background: var(--marigold); color: var(--white); }
.btn-primary:hover{ background: var(--marigold-deep); transform: translateY(-2px); }
.btn-outline{ border-color: var(--indigo); color: var(--indigo); background:transparent; }
.btn-outline:hover{ background: var(--indigo); color:var(--white); }
.btn-outline-light{ border-color: rgba(255,255,255,.5); color:var(--white); background:transparent; }
.btn-outline-light:hover{ background: var(--white); color: var(--indigo); }
.btn-sm{ padding: 9px 18px; font-size:.82rem; }
.btn-block{ width:100%; justify-content:center; }

/* ---------- TOPBAR ---------- */
.topbar{ background: var(--indigo-deep); color: rgba(255,255,255,.85); font-size:.82rem; }
.topbar-inner{ display:flex; justify-content:space-between; align-items:center; padding: 8px 24px; flex-wrap:wrap; gap:8px; }
.topbar-contact a{ margin-right:20px; opacity:.9; }
.topbar-contact a:hover{ color: var(--marigold); }
.topbar-social{ display:flex; align-items:center; gap:14px; }
.topbar-social a{ opacity:.85; }
.topbar-social a:hover{ color: var(--marigold); }

/* ---------- HEADER / NAV ---------- */
.main-header{ background: var(--white); position: sticky; top:0; z-index: 500; box-shadow: 0 2px 14px rgba(0,0,0,.06); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 28px; gap: 16px; max-width:1500px; margin:0 auto; }
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand-mark{
  width:44px; height:44px; border-radius:50%; background: var(--indigo);
  color: var(--marigold); font-family: var(--font-display); font-weight:700; font-size:1.3rem;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  border: 2px solid var(--marigold);
}
.brand-logo{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; border: 2px solid var(--marigold); }
.footer-brand .brand-logo{ border-color: rgba(255,255,255,.4); }
.brand-text{ min-width:0; }
.brand-text strong{ display:block; font-family: var(--font-display); font-size:1.08rem; color: var(--indigo); white-space:nowrap; }
.brand-text small{ display:block; font-family: var(--font-utility); font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; color: var(--marigold-deep); white-space:nowrap; }

.main-nav > ul{ display:flex; align-items:center; gap: 0; flex-wrap:nowrap; }
.main-nav > ul > li{ position:relative; }
.main-nav > ul > li > a{
  display:flex; align-items:center; gap:4px;
  font-family: var(--font-utility); font-weight:600; font-size:.79rem;
  padding: 11px 9px; color: var(--ink); border-radius: 8px; white-space:nowrap;
}
.main-nav > ul > li > a:hover, .main-nav > ul > li > a.active{ color: var(--marigold-deep); background: var(--cream-dim); }
.main-nav .fa-chevron-down{ font-size:.6rem; opacity:.6; }
.btn-portal-nav{ background: var(--indigo); color: var(--white) !important; border-radius:999px !important; padding: 10px 14px !important; margin-left:4px; }
.btn-employee-nav{ border: 1.5px solid var(--indigo); color: var(--indigo) !important; border-radius:999px !important; padding: 8.5px 14px !important; margin-left:4px; }
.btn-employee-nav:hover{ background: var(--cream-dim); }
.btn-portal-nav:hover{ background: var(--indigo-deep) !important; color: var(--white) !important; }

.dropdown{
  display:block; list-style:none; margin:0;
  position:absolute; top: 100%; right:0; background: var(--white); min-width: 240px; max-width: 320px;
  box-shadow: var(--shadow-lift); border-radius: 10px; padding: 8px; opacity:0; visibility:hidden;
  transform: translateY(8px); transition: all .18s ease; z-index:50;
}
.main-nav > ul > li:first-child .dropdown,
.main-nav > ul > li:nth-child(2) .dropdown{ left:0; right:auto; }
@media (min-width: 1601px){
  .has-dropdown:hover > .dropdown{ opacity:1; visibility:visible; transform: translateY(0); }
  .has-submenu:hover > .submenu{ opacity:1; visibility:visible; transform:translateX(0); }
}
.dropdown li{ display:block; width:100%; }
.dropdown li a{ display:flex; justify-content:space-between; align-items:center; padding: 10px 14px; font-size:.88rem; border-radius:6px; color: var(--ink-soft); white-space:nowrap; }
.dropdown li a:hover{ background: var(--cream-dim); color: var(--indigo); }
.has-submenu{ position:relative; }
.submenu-arrow{ font-size:.6rem; }
.submenu{
  display:block; list-style:none; margin:0;
  position:absolute; left: 100%; top:0; background:var(--white); min-width:280px;
  box-shadow: var(--shadow-lift); border-radius:10px; padding:8px; opacity:0; visibility:hidden;
  transform: translateX(8px); transition: all .18s ease;
}
.submenu li{ display:block; width:100%; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span{ width:26px; height:3px; background: var(--indigo); border-radius:2px; }


/* ---------- HERO (Notice-board signature) ---------- */
.hero{
  position:relative; background: var(--indigo);
  background-image: radial-gradient(circle at 18% 25%, rgba(232,146,60,0.18), transparent 45%),
                     radial-gradient(circle at 85% 75%, rgba(122,155,118,0.18), transparent 45%);
  color: var(--white); overflow:hidden;
}
.hero-inner{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items:center; padding: 80px 24px 90px; max-width:1180px; margin:0 auto; }
.hero-eyebrow{ color: var(--marigold); }
.hero-eyebrow::before{ background: var(--marigold); }
.hero h1{ color: var(--white); font-size: clamp(2.1rem, 4vw, 3.2rem); margin: 14px 0 18px; }
.hero p.lede{ color: rgba(255,255,255,.82); font-size:1.05rem; max-width: 520px; }
.hero-actions{ display:flex; gap:14px; margin-top: 28px; flex-wrap:wrap; }
.hero-meta{ display:flex; gap:28px; margin-top:36px; flex-wrap:wrap; }
.hero-meta div strong{ display:block; font-family: var(--font-display); font-size:1.6rem; color: var(--marigold); }
.hero-meta div span{ font-size:.8rem; color: rgba(255,255,255,.7); }

/* Pinned notice card stack */
.notice-stack{ position:relative; }
.notice-card{
  background: var(--cream); color: var(--ink); border-radius: 6px; padding: 22px 22px 20px;
  box-shadow: var(--shadow-lift); position:relative; margin-bottom: -34px;
  transform: rotate(-2deg); display:block; cursor:pointer; transition: transform .2s ease, box-shadow .2s ease;
}
.notice-card:hover{ box-shadow: 0 18px 40px rgba(27,42,74,.22); }
.notice-card:nth-child(2){ transform: rotate(1.5deg); margin-left: 26px; }
.notice-card:nth-child(2):hover{ transform: rotate(1.5deg) translateY(-3px); }
.notice-card:nth-child(3){ transform: rotate(-1deg); margin-left: 10px; margin-bottom:0; }
.notice-card:nth-child(3):hover{ transform: rotate(-1deg) translateY(-3px); }
.notice-card:nth-child(1):hover{ transform: rotate(-2deg) translateY(-3px); }
.notice-card .pin{
  width:14px; height:14px; border-radius:50%; background: var(--marigold);
  position:absolute; top:-7px; left: 24px; box-shadow: 0 3px 6px rgba(0,0,0,.25);
}
.notice-card .tag{ font-family: var(--font-utility); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color: var(--marigold-deep); font-weight:700; }
.notice-card h4{ font-size:1rem; margin: 6px 0 4px; color: var(--indigo); }
.notice-card p{ font-size:.85rem; color: var(--ink-soft); margin:0; }
.notice-card .date{ font-family: var(--font-utility); font-size:.72rem; color: var(--sage-deep); margin-top:8px; display:block; }
.notice-card.has-image{ display:flex; gap:14px; align-items:flex-start; }
.notice-card .notice-thumb{ width:64px; height:64px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.notice-card .notice-card-body{ flex:1; min-width:0; }

/* ---------- CARD GRIDS ---------- */
.grid{ display:grid; gap: 26px; }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
.grid-2{ grid-template-columns: repeat(2,1fr); }

.card{ background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow:hidden; transition: transform .2s ease, box-shadow .2s ease; display:block; color:inherit; text-decoration:none; }
.card:hover{ color:inherit; }
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card-body{ padding: 24px; }
.card img{ width:100%; height: 190px; object-fit:cover; }
.card .eyebrow{ margin-bottom:8px; }

.facility-card{ text-align:center; padding: 32px 22px; }
.facility-card .icon{
  width:64px; height:64px; border-radius:50%; background: var(--cream-dim); color: var(--marigold-deep);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin: 0 auto 16px;
  border: 2px dashed var(--marigold);
}
.facility-card h3{ font-size:1.05rem; }
.facility-card p{ font-size:.9rem; color: var(--ink-soft); }

.team-card{ text-align:center; padding-bottom:24px; }
.team-card img{ height:240px; object-fit:cover; }
.team-card h3{ font-size:1.05rem; margin-bottom:2px;}
.team-card .role{ font-family: var(--font-utility); font-size:.78rem; color: var(--marigold-deep); text-transform:uppercase; letter-spacing:.05em; }
.team-card p.msg{ font-size:.85rem; color: var(--ink-soft); margin-top:10px; font-style:italic; }

.activity-card{ text-align:left; padding-bottom:0; }
.activity-card img{ height:190px; }

.software-card{ display:flex; flex-direction:column; }
.software-card img{ height:110px; object-fit:contain; padding:20px; background: var(--cream-dim); }
.software-card .card-body{ flex:1; display:flex; flex-direction:column; }
.software-card .card-body span{ margin-top:auto; padding-top:10px; }

/* ---------- SECTION BG VARIANTS ---------- */
.bg-indigo{ background: var(--indigo); color: var(--white); }
.bg-indigo h2, .bg-indigo h3{ color: var(--white); }
.bg-dim{ background: var(--cream-dim); }
.bg-sage{ background: var(--sage); color: var(--white); }
.bg-sage h2{ color: var(--white); }

/* ---------- HOME SLIDER ---------- */
.home-slider{ position:relative; background: var(--ink); overflow:hidden; }
.slider-track{ position:relative; width:100%; aspect-ratio: 16/6; min-height:280px; }
.slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition: opacity .6s ease; }
.slide.active{ opacity:1; visibility:visible; }
.slide a{ display:block; width:100%; height:100%; position:relative; }
.slide img{ width:100%; height:100%; object-fit:cover; }
.slide-caption{
  position:absolute; left:0; bottom:0; right:0; padding: 36px 48px;
  background: linear-gradient(180deg, transparent, rgba(18,29,52,.85));
  color: var(--white);
}
.slide-caption h3{ color: var(--white); font-size:1.5rem; margin-bottom:4px; }
.slide-caption p{ color: rgba(255,255,255,.85); margin:0; font-size:.95rem; max-width:560px; }
.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  background: rgba(255,255,255,.92); color: var(--indigo); border:none; cursor:pointer; font-size:1rem;
  display:flex; align-items:center; justify-content:center; transition:.2s; z-index:10;
}
.slider-arrow:hover{ background: var(--marigold); color: var(--white); }
.slider-arrow.prev{ left:20px; }
.slider-arrow.next{ right:20px; }
.slider-dots{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:10; }
.slider-dots .dot{ width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,.5); border:none; cursor:pointer; padding:0; transition:.2s; }
.slider-dots .dot.active{ background: var(--marigold); width:22px; border-radius:5px; }

/* ---------- MISSION/VISION strip ---------- */
.mv-strip{ display:grid; grid-template-columns: repeat(3,1fr); gap:0; }
.mv-item{ padding: 44px 36px; border-right: 1px solid rgba(255,255,255,.12); }
.mv-item:last-child{ border-right:none; }
.mv-item i{ font-size:1.6rem; color: var(--marigold); margin-bottom: 14px; }
.mv-item h3{ font-size:1.1rem; }
.mv-item p{ font-size:.9rem; color: rgba(255,255,255,.78); margin:0; }

/* ---------- PAGE HEADER (interior pages) ---------- */
.page-header{
  background: var(--indigo); color: var(--white); padding: 56px 0 64px; position:relative;
  background-image: radial-gradient(circle at 90% 10%, rgba(232,146,60,0.2), transparent 40%);
}
.page-header h1{ color:var(--white); margin-bottom:8px; }
.breadcrumb{ font-family: var(--font-utility); font-size:.82rem; color: rgba(255,255,255,.7); }
.breadcrumb a{ color: var(--marigold); }
.breadcrumb i{ font-size:.65rem; margin: 0 6px; }

/* ---------- CONTENT PAGE ---------- */
.content-wrap{ padding: 60px 0; }
.content-layout{ display:grid; grid-template-columns: 2.2fr 1fr; gap: 44px; align-items:start; }
.prose{ font-size:1rem; color: var(--ink-soft); }
.prose h2, .prose h3{ color: var(--indigo); margin-top: 1.4em; }
.prose img{ border-radius: var(--radius); margin: 18px 0; }
.prose ul{ list-style: disc; padding-left: 22px; margin-bottom:1em; }
.prose table{ width:100%; border-collapse:collapse; margin: 1em 0; }
.prose table th, .prose table td{ border:1px solid var(--line); padding:10px 12px; text-align:left; font-size:.92rem; }
.prose table th{ background: var(--cream-dim); font-family: var(--font-utility); }

.sidebar-box{ background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 24px; margin-bottom: 22px; }
.sidebar-box h4{ font-size:1rem; border-bottom: 2px solid var(--marigold); padding-bottom:10px; margin-bottom:14px; }
.sidebar-box ul li a{ display:flex; align-items:center; gap:8px; padding: 9px 0; font-size:.88rem; color: var(--ink-soft); border-bottom:1px dashed var(--line); }
.sidebar-box ul li:last-child a{ border-bottom:none; }
.sidebar-box ul li a:hover{ color: var(--marigold-deep); }
.sidebar-box ul li a.current{ color: var(--marigold-deep); font-weight:600; }

/* ---------- LEDGER TABLE (committees / results / documents) ---------- */
.ledger{ width:100%; border-collapse: collapse; background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow: var(--shadow-card); }
.ledger th{ background: var(--indigo); color: var(--white); font-family: var(--font-utility); font-weight:600; text-align:left; padding: 14px 16px; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; }
.ledger td{ padding: 14px 16px; border-bottom: 1px solid var(--line); font-size:.92rem; color: var(--ink-soft); }
.ledger tr:last-child td{ border-bottom:none; }
.ledger tr:hover td{ background: var(--cream-dim); }
.ledger a.doc-link{ color: var(--marigold-deep); font-weight:600; display:inline-flex; gap:6px; align-items:center; }

/* ---------- GALLERY ---------- */
.gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gallery-item{ position:relative; border-radius: 8px; overflow:hidden; aspect-ratio: 4/3; cursor:pointer; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.gallery-item:hover img{ transform: scale(1.08); }
.gallery-item .overlay{
  position:absolute; inset:0; background: linear-gradient(180deg, transparent 50%, rgba(27,42,74,.85));
  display:flex; align-items:flex-end; padding: 12px; opacity:0; transition:.2s;
}
.gallery-item:hover .overlay{ opacity:1; }
.gallery-item .overlay span{ color:var(--white); font-size:.78rem; font-family: var(--font-utility); }

.filter-tabs{ display:flex; gap:10px; margin-bottom: 30px; flex-wrap:wrap; }
.filter-tabs a{ padding: 9px 18px; border-radius:999px; background: var(--white); border: 1px solid var(--line); font-family: var(--font-utility); font-size:.85rem; font-weight:600; color: var(--ink-soft); }
.filter-tabs a.active{ background: var(--indigo); color: var(--white); border-color:var(--indigo); }

/* ---------- VIDEO CARD ---------- */
.video-card .thumb{ position:relative; }
.video-card .thumb::after{
  content:'\f04b'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; color:var(--white); font-size:1.4rem;
  background: rgba(27,42,74,.35);
}
.video-embed{ position:relative; width:100%; padding-top:56.25%; border-radius: var(--radius); overflow:hidden; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- FORMS ---------- */
.form-grid{ display:grid; gap:18px; }
.form-row-2{ grid-template-columns: 1fr 1fr; display:grid; gap:18px; }
.form-row-3{ grid-template-columns: 1fr 1fr 1fr; display:grid; gap:18px; }
label{ display:block; font-family: var(--font-utility); font-size:.82rem; font-weight:600; margin-bottom:6px; color: var(--indigo); }
input, select, textarea{
  width:100%; padding: 12px 14px; border:1px solid var(--line); border-radius: 8px; font-family: var(--font-body);
  font-size:.95rem; background: var(--white); color: var(--ink);
}
input:focus, select:focus, textarea:focus{ outline:none; border-color: var(--marigold); box-shadow: 0 0 0 3px rgba(232,146,60,.18); }
textarea{ resize: vertical; min-height: 130px; }

.alert{ padding: 14px 18px; border-radius: 8px; margin-bottom: 20px; font-size:.92rem; }
.alert-success{ background: #e8f3e6; color: var(--sage-deep); border:1px solid #c7e0c2; }
.alert-error{ background: #fbe9e7; color: #b3402c; border:1px solid #f3c9c2; }

/* ---------- CONTACT PAGE ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap: 44px; }
.contact-info-item{ display:flex; gap:16px; margin-bottom:22px; }
.contact-info-item i{ width:44px; height:44px; border-radius:50%; background: var(--cream-dim); color: var(--marigold-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info-item h4{ font-size:.95rem; margin-bottom:4px; }
.contact-info-item p{ font-size:.88rem; color: var(--ink-soft); margin:0; }
.map-embed{ border-radius: var(--radius); overflow:hidden; margin-top: 24px; }
.map-embed iframe{ width:100%; height:260px; border:0; display:block; }

/* ---------- LOGIN (Student Portal) ---------- */
.login-wrap{ min-height: 70vh; display:flex; align-items:center; justify-content:center; padding: 60px 24px; }
.login-card{ background: var(--white); max-width: 420px; width:100%; border-radius: 14px; box-shadow: var(--shadow-lift); padding: 40px 36px; }
.login-card .icon-top{ width:56px;height:56px;border-radius:50%; background: var(--indigo); color: var(--marigold); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin: 0 auto 18px; }
.login-card h2{ text-align:center; font-size:1.3rem; }
.login-card p.sub{ text-align:center; font-size:.88rem; color: var(--ink-soft); margin-bottom: 26px; }
.demo-creds{ margin-top:18px; padding: 12px 14px; background: var(--cream-dim); border-radius:8px; font-size:.78rem; color: var(--ink-soft); }

/* ---------- DASHBOARD (student portal interior) ---------- */
.dash-shell{ display:grid; grid-template-columns: 240px 1fr; min-height: 70vh; }
.dash-sidebar{ background: var(--indigo); color: var(--white); padding: 28px 18px; }
.dash-sidebar .stu-name{ font-family:var(--font-display); font-size:1.05rem; margin-bottom:2px; }
.dash-sidebar .stu-meta{ font-size:.78rem; color: rgba(255,255,255,.65); margin-bottom: 24px; }
.dash-nav a{ display:flex; align-items:center; gap:10px; padding: 11px 14px; border-radius:8px; font-size:.88rem; font-weight:600; color: rgba(255,255,255,.85); margin-bottom:4px; }
.dash-nav a:hover, .dash-nav a.active{ background: rgba(255,255,255,.12); color: var(--marigold); }
.dash-main{ padding: 36px 40px; background: var(--cream-dim); }
.stat-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-bottom: 30px; }
.stat-box{ background: var(--white); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-card); }
.stat-box span{ font-family: var(--font-utility); font-size:.78rem; color: var(--ink-soft); text-transform:uppercase; }
.stat-box strong{ display:block; font-family: var(--font-display); font-size:1.7rem; color: var(--indigo); margin-top:6px; }
.badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:.72rem; font-weight:700; font-family: var(--font-utility); }
.badge-paid{ background:#e8f3e6; color: var(--sage-deep); }
.badge-unpaid{ background:#fbe9e7; color:#b3402c; }
.badge-partial{ background:#fdf2e2; color: var(--marigold-deep); }

/* ---------- CTA STRIP ---------- */
.cta-strip{ background: var(--marigold); color: var(--white); padding: 50px 0; text-align:center; }
.cta-strip h2{ color: var(--white); }
.cta-strip .btn-outline-light{ margin-top:14px; }

/* ---------- BACK TO TOP ---------- */
#backToTop{
  position: fixed; bottom: 26px; right: 26px; width: 46px; height:46px; border-radius:50%;
  background: var(--indigo); color: var(--marigold); border:none; cursor:pointer; font-size:1rem;
  box-shadow: var(--shadow-lift); opacity:0; visibility:hidden; transition:.25s; z-index: 400;
}
#backToTop.show{ opacity:1; visibility:visible; }

/* ---------- FOOTER ---------- */
.site-footer{ background: var(--indigo-deep); color: rgba(255,255,255,.82); padding-top: 64px; }
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 48px;
}
.footer-col h4{ color: var(--white); font-size:1rem; margin-bottom:18px; }
.footer-col ul li{ margin-bottom:11px; }
.footer-col ul li a{ font-size:.88rem; color: rgba(255,255,255,.72); transition: color .15s; }
.footer-col ul li a:hover{ color: var(--marigold); }

.footer-brand .brand{ margin-bottom: 16px; }
.footer-brand .brand-text strong{ color: var(--white); }
.footer-brand p{ font-size:.88rem; color: rgba(255,255,255,.65); line-height:1.65; margin-bottom: 20px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center; color: rgba(255,255,255,.85);
  transition: all .15s;
}
.footer-social a:hover{ background: var(--marigold); border-color: var(--marigold); color: var(--white); }

.footer-contact{ margin-bottom: 18px; }
.footer-contact li{
  display:flex; align-items:flex-start; gap:10px; font-size:.86rem; color: rgba(255,255,255,.72);
  line-height:1.5; margin-bottom:13px;
}
.footer-contact li i{ color: var(--marigold); margin-top:3px; flex-shrink:0; width:14px; }

.footer-bottom{ border-top: 1px solid rgba(255,255,255,.12); padding: 20px 0; }
.footer-bottom p{ margin:0; font-size:.82rem; color: rgba(255,255,255,.55); text-align:center; }

/* ---------- RESPONSIVE ---------- */

/* Nav switches to the mobile hamburger well before the 13-item menu runs out of room */
@media (max-width: 1600px){
  .nav-toggle{ display:flex; }
  .main-nav{
    position:fixed; top:0; right:-100%; width: 84%; max-width:340px; height:100vh; background:var(--white);
    box-shadow: -10px 0 30px rgba(0,0,0,.15); transition: right .3s ease; overflow-y:auto; padding: 90px 20px 40px;
    z-index: 600;
  }
  .main-nav.open{ right:0; }
  .main-nav ul{ flex-direction:column; align-items:stretch; gap:2px; flex-wrap:wrap; }
  .main-nav > ul > li > a{ font-size:.92rem; padding:13px 14px; }
  .main-nav .dropdown, .main-nav .submenu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; display:none; padding-left: 14px; }
  .main-nav .has-dropdown.open > .dropdown, .main-nav .has-submenu.open > .submenu{ display:block; }
  .btn-portal-nav{ margin-top:6px; justify-content:center; }
  .btn-employee-nav{ margin-top:6px; justify-content:center; }
}

@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; padding-top:50px; }
  .mv-strip{ grid-template-columns: 1fr; }
  .mv-item{ border-right:none; border-bottom: 1px solid rgba(255,255,255,.12); }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .content-layout{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .dash-shell{ grid-template-columns: 1fr; }
  .dash-sidebar{ display:none; }
  .stat-row{ grid-template-columns: repeat(2,1fr); }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: repeat(2,1fr); gap: 36px 24px; }
}
@media (max-width: 760px){
  .topbar-contact a:first-child{ margin-right: 12px; }
  .grid-4, .grid-3, .grid-2{ grid-template-columns: 1fr; }
  .form-row-2{ grid-template-columns: 1fr; }
  .form-row-3{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .header-inner{ padding: 12px 20px; }
  .footer-grid{ grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom .container{ text-align:center; }
}