/* =====================================================
   Legal Unit — SDO Camarines Norte — Site Styles
   DepEd palette: deep blue + gold/yellow
   ===================================================== */
:root {
    --deped-blue:  #0038a8;   /* DepEd blue */
    --deped-navy:  #002766;
    --deped-gold:  #fcd116;   /* DepEd yellow */
    --deped-red:   #ce1126;
    --ink:         #222;
    --muted:       #6c757d;
}

* { scroll-behavior: smooth; }
body {
    font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
    color: var(--ink);
    background: #f6f8fb;
}

/* ---- Top bar ---- */
.topbar {
    background: var(--deped-navy);
    color: #fff;
    font-size: .82rem;
    padding: 6px 0;
}
.topbar a { text-decoration: none; }

/* ---- Navbar ---- */
.deped-navbar {
    background: var(--deped-blue) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    border-bottom: 3px solid var(--deped-gold);
}
.brand-logo { height: 46px; width: auto; }
.brand-name { font-weight: 700; font-size: 1.05rem; line-height: 1.1; color: #fff; }
.brand-sub  { font-size: .68rem; color: var(--deped-gold); font-weight: 400; }
.navbar-nav .nav-link { font-weight: 500; color: #eaf0ff !important; padding: .5rem 1rem !important; }
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { color: var(--deped-gold) !important; }

/* ---- Hero ---- */
.hero {
    position: relative;
    background: linear-gradient(rgba(0,38,102,.82), rgba(0,38,102,.82)),
                url('../img/hero.jpg') center/cover no-repeat;
    background-color: var(--deped-navy);
    color: #fff;
    padding: 90px 0;
    text-align: center;
}
.hero h1 { font-weight: 700; font-size: 2.6rem; }
.hero p  { font-size: 1.15rem; max-width: 720px; margin: 1rem auto 1.6rem; opacity: .95; }
.hero .btn-gold {
    background: var(--deped-gold); color: var(--deped-navy);
    font-weight: 600; border: none; padding: .6rem 1.6rem;
}
.hero .btn-gold:hover { background: #ffe14d; }

/* ---- Photo carousel ---- */
.hero-carousel { border-bottom: 3px solid var(--deped-gold); }
.hero-carousel .carousel-item img { height: 520px; object-fit: cover; }
.hero-carousel .carousel-item::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,38,102,.6), rgba(0,38,102,.05) 55%);
}
.hero-carousel .carousel-caption {
    z-index: 2; bottom: 18%; text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.hero-carousel .carousel-caption h2 { font-weight: 700; font-size: 2.4rem; }
.hero-carousel .carousel-caption p  { font-size: 1.1rem; }
.hero-carousel .carousel-indicators [data-bs-target] { width: 12px; height: 12px; border-radius: 50%; }
@media (max-width: 768px) {
    .hero-carousel .carousel-item img { height: 300px; }
    .hero-carousel .carousel-caption h2 { font-size: 1.4rem; }
}

/* ---- Section headings ---- */
.section { padding: 64px 0; }
.section-title { font-weight: 700; color: var(--deped-navy); margin-bottom: .3rem; }
.section-title-underline {
    width: 70px; height: 4px; background: var(--deped-gold);
    border-radius: 3px; margin: 0 auto 2.2rem;
}
.text-deped { color: var(--deped-blue) !important; }
.bg-deped   { background: var(--deped-blue) !important; }

/* ---- Cards ---- */
.card { border: none; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,.06); transition: transform .2s, box-shadow .2s; overflow: hidden; }
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,.12); }
.card-img-top { height: 190px; object-fit: cover; }
.card-date { font-size: .8rem; color: var(--muted); }

/* Vision / Mission blocks */
.vm-card { border-top: 4px solid var(--deped-gold); height: 100%; }
.vm-icon { font-size: 2rem; color: var(--deped-blue); }

/* Quick info tiles on home */
.info-tile { background:#fff; border-radius:12px; padding:26px; text-align:center; height:100%;
             box-shadow:0 4px 18px rgba(0,0,0,.06); }
.info-tile i { font-size: 2.2rem; color: var(--deped-blue); margin-bottom:.6rem; }

/* ---- Legal Staff ---- */
.faculty-card img,
.faculty-placeholder {
    width: 130px; height: 130px; border-radius: 50%; object-fit: cover;
    border: 4px solid var(--deped-gold); margin: 0 auto;
}
.faculty-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: var(--deped-blue); color:#fff; font-size: 2.4rem;
}

/* ---- Page banner ---- */
.page-banner {
    background: linear-gradient(rgba(0,38,102,.85), rgba(0,38,102,.85)), var(--deped-blue);
    color: #fff; padding: 54px 0; text-align: center;
}
.page-banner h1 { font-weight: 700; margin: 0; }
.breadcrumb-light .breadcrumb-item, .breadcrumb-light a { color: #dbe4ff; text-decoration: none; }
.breadcrumb-light .active { color: var(--deped-gold); }

/* ---- Footer ---- */
.site-footer { background: var(--deped-navy); color: #cdd8f0; margin-top: 40px; }
.site-footer .container { padding: 48px 15px 0; }
.footer-title { color: #fff; font-weight: 600; margin-bottom: 1rem; position: relative; }
.footer-links { list-style: none; padding: 0; }
.footer-links a { color: #cdd8f0; text-decoration: none; display: inline-block; padding: 3px 0; }
.footer-links a:hover { color: var(--deped-gold); }
.social-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; background: var(--deped-blue);
    color: #fff; margin-right: 6px;
}
.social-btn:hover { background: var(--deped-gold); color: var(--deped-navy); }
.admin-link { color: #9fb3e0; text-decoration: none; font-size: .85rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 34px; padding: 16px 0; font-size: .85rem; }

/* ---- Utilities ---- */
.empty-state { text-align:center; color: var(--muted); padding: 40px 0; }
.empty-state i { font-size: 3rem; opacity:.4; }

@media (max-width: 576px) {
    .hero h1 { font-size: 1.9rem; }
    .hero { padding: 60px 0; }
}