/* =====================================================================
   Public website styling.
   Layout and presentation only -- all content comes from the database.
   ===================================================================== */

:root {
    --brand: #16324f;
    --brand-dark: #102438;
    --brand-accent: #b8892b;
    --surface: #f6f8fb;
    --border: #e2e8f0;
}

body {
    color: #26303d;
    background: #fff;
}

a { color: var(--brand); }
a:hover { color: var(--brand-accent); }

.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1080;
    background: #fff;
    padding: 0.5rem 0.9rem;
    border-radius: 0.35rem;
}

/* ---- Top utility bar ------------------------------------------------ */
.topbar {
    background: var(--brand-dark);
    color: rgba(255, 255, 255, 0.85);
    padding: 0.4rem 0;
}
.topbar-link { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.topbar-link:hover { color: #fff; }

/* ---- Header --------------------------------------------------------- */
.site-header {
    background: #fff;
    border-bottom: 3px solid var(--brand);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.site-logo { width: 46px; height: 46px; object-fit: contain; }
.site-logo-fallback {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand); color: #fff; border-radius: 0.5rem; font-size: 1.4rem;
}
.brand-name { display: block; font-weight: 700; color: var(--brand); line-height: 1.15; font-size: 1.05rem; }
.brand-sub { font-size: 0.75rem; color: #6b7684; }
.navbar-nav .nav-link { font-weight: 500; color: #26303d; padding: 0.5rem 0.75rem; }
.navbar-nav .nav-link:hover { color: var(--brand-accent); }

/* ---- Page hero ------------------------------------------------------ */
.page-hero {
    background: linear-gradient(120deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff;
    padding: 2.5rem 0;
    position: relative;
    background-size: cover;
    background-position: center;
}
.page-hero.has-image::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(120deg, rgba(16,50,79,0.88), rgba(16,36,56,0.82));
}
.page-hero > .container { position: relative; }
.page-hero h1 { font-weight: 700; margin-bottom: 0.35rem; }
.page-hero .lead { color: rgba(255,255,255,0.85); margin-bottom: 0; }
.page-hero .breadcrumb { margin-bottom: 0.5rem; }
.page-hero .breadcrumb a { color: rgba(255,255,255,0.85); text-decoration: none; }
.page-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.5); }
.page-hero .breadcrumb-item.active { color: rgba(255,255,255,0.7); }

/* ---- Home hero ------------------------------------------------------ */
.home-hero {
    background: linear-gradient(120deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff;
    padding: 4rem 0;
    background-size: cover;
    background-position: center;
    position: relative;
}
.home-hero.has-image::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(120deg, rgba(16,50,79,0.9), rgba(16,36,56,0.8));
}
.home-hero > .container { position: relative; }
.home-hero h1 { font-weight: 800; font-size: clamp(1.8rem, 4vw, 3rem); }
.home-hero p { color: rgba(255,255,255,0.9); }

/* ---- Sections ------------------------------------------------------- */
/* Band padding is the single biggest lever on page length: every band
   pays it twice. 2rem keeps the bands clearly separate without the page
   turning into five screens of whitespace. */
.section { padding: 2rem 0; }
.section-alt { background: var(--surface); }
.section-title { font-weight: 700; color: var(--brand); margin-bottom: 0.2rem; font-size: 1.35rem; }
.section-subtitle { color: #6b7684; margin-bottom: 0; }
.section-rule {
    width: 52px; height: 3px; background: var(--brand-accent);
    margin: 0.5rem 0 1rem;
}

/* ---- Content typography --------------------------------------------- */
.content-body { line-height: 1.75; }
.content-body h2, .content-body h3, .content-body h4 { color: var(--brand); margin-top: 1.5rem; }
.content-body img { max-width: 100%; height: auto; border-radius: 0.5rem; }
.content-body table { width: 100%; margin: 1rem 0; border-collapse: collapse; }
.content-body table th, .content-body table td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; }
.content-body ul, .content-body ol { padding-left: 1.25rem; }

/* Wide content must scroll inside itself, never break the page. */
.content-body { overflow-wrap: break-word; }
.table-scroll { overflow-x: auto; }

/* ---- Cards and lists ------------------------------------------------ */
/* No height here. A row is a flex container, so a column is stretched to
   the tallest column beside it -- which gives it a definite height, which
   makes height:100% on EVERY tile inside it resolve to that full height.
   Stack three tiles in one column and they each take the column's height,
   overflow it, and run down over the footer.

   Tiles that genuinely want to match their neighbours are grid cards, and
   those already ask for it with Bootstrap's .h-100. */
.tile {
    background: #fff; border: 1px solid var(--border); border-radius: 0.6rem;
    transition: box-shadow .15s ease, transform .15s ease;
}
.tile:hover { box-shadow: 0 .5rem 1.25rem rgba(16,36,56,.1); transform: translateY(-2px); }
.tile-body { padding: 1rem; }

/* The department's Head, marked out in the faculty list. The accent edge
   carries the distinction on its own, so the badge is not the only cue
   for a reader who cannot pick out the colour. */
.tile-head { border-color: var(--brand-accent); border-left-width: 3px; }
.badge-head {
    display: inline-block; padding: 0.1rem 0.5rem; border-radius: 1rem;
    background: var(--brand-accent); color: #fff;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
}

/* Where a committee member comes from. Tinted rather than filled, so the
   column stays quiet next to the Role badges; the label itself carries
   the meaning, so nothing is lost without the colour. */
.member-from {
    display: inline-block; padding: 0.05rem 0.45rem; border-radius: 1rem;
    font-size: 0.72rem; font-weight: 600;
    border: 1px solid currentColor; background: #fff;
}
.member-from-faculty  { color: var(--brand); }
.member-from-staff    { color: #5a6570; }
.member-from-student  { color: #2f7a4d; }
.member-from-external { color: var(--brand-accent); }

.notice-row {
    display: flex; gap: 1rem; padding: 0.9rem 0;
    border-bottom: 1px solid var(--border);
}
.notice-row:last-child { border-bottom: 0; }
.notice-date {
    flex: 0 0 62px; text-align: center; background: var(--surface);
    border-radius: 0.45rem; padding: 0.35rem 0; line-height: 1.1;
}
.notice-date .d { font-size: 1.25rem; font-weight: 700; color: var(--brand); }
.notice-date .m { font-size: 0.7rem; text-transform: uppercase; color: #6b7684; }
.notice-title { font-weight: 600; color: #1d2733; text-decoration: none; }
.notice-title:hover { color: var(--brand-accent); }

.event-date-badge {
    background: var(--brand); color: #fff; border-radius: 0.45rem;
    padding: 0.4rem 0.6rem; text-align: center; line-height: 1.15; min-width: 62px;
}
.event-date-badge .d { font-size: 1.2rem; font-weight: 700; display: block; }
.event-date-badge .m { font-size: 0.7rem; text-transform: uppercase; }

.gallery-thumb {
    width: 100%; height: 190px; object-fit: cover;
    border-radius: 0.5rem; background: var(--surface);
}
.staff-photo {
    width: 84px; height: 84px; object-fit: cover; border-radius: 50%;
    border: 3px solid var(--surface); background: var(--surface);
    display: inline-flex; align-items: center; justify-content: center; color: #aab3c0;
}
.profile-photo {
    width: 100%; max-width: 150px; aspect-ratio: 1; object-fit: cover;
    border-radius: 0.6rem; background: var(--surface);
}

.quick-link {
    display: flex; align-items: center; gap: .6rem;
    padding: .7rem .9rem; background: #fff; border: 1px solid var(--border);
    border-radius: .5rem; text-decoration: none; color: #26303d; font-weight: 500;
}
.quick-link:hover { border-color: var(--brand); color: var(--brand); }

.stat-tile { text-align: center; padding: 1.25rem 0.5rem; }
.stat-tile .n { font-size: 1.9rem; font-weight: 700; color: var(--brand); line-height: 1; }
.stat-tile .l { font-size: 0.85rem; color: #6b7684; }

/* ---- Side navigation on detail pages -------------------------------- */
.side-nav .list-group-item.active { background: var(--brand); border-color: var(--brand); }

/* ---- Search --------------------------------------------------------- */
.search-result { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.search-result:last-child { border-bottom: 0; }
.search-result mark { background: #fff3cd; padding: 0 .1em; }
.result-type {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 1rem; padding: .1rem .55rem; color: #6b7684;
}

/* ---- Footer --------------------------------------------------------- */
/* No margin-top: the last band's padding already separates it, and the
   footer has its own dark background so the join is obvious. */
.site-footer { background: var(--brand-dark); color: rgba(255,255,255,.82); padding: 2.25rem 0 1.25rem; margin-top: 0; }
.footer-heading { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: .9rem; }
.footer-links a, .footer-contact a { color: rgba(255,255,255,.82); text-decoration: none; }
.footer-links a:hover, .footer-contact a:hover { color: #fff; }
.footer-links li { padding: .18rem 0; }
.footer-contact li { display: flex; padding: .25rem 0; }
.footer-rule { border-color: rgba(255,255,255,.15); margin: 2rem 0 1rem; }
.site-footer a { color: rgba(255,255,255,.9); }

/* ---- Small screens -------------------------------------------------- */
/* The header collapses to the toggler below xl (see navbar-expand-xl in
   the layout), so the stacked-menu styling has to match that breakpoint. */
@media (max-width: 1199.98px) {
    .navbar-nav .nav-link { padding: .55rem .25rem; border-bottom: 1px solid var(--border); }
    .navbar-nav form { margin-top: .75rem; }
}

@media (max-width: 991.98px) {
    .section { padding: 1.5rem 0; }
    .home-hero { padding: 2rem 0; }
    .site-footer { padding: 1.75rem 0 1rem; }
}

/* =====================================================================
   HOMEPAGE REDESIGN
   Photo slider under the menu, then paired bands (principal + notices,
   events + news, quick + important links) instead of a single column of
   full-width stripes.
   ===================================================================== */

/* ---- Photo slider ---------------------------------------------------- */
.home-slider {
    position: relative;
    background: var(--brand-dark);
}

/* Sized so the principal's message and notices start near the fold on a
   laptop, rather than the banner taking most of the first screen. */
.home-slider .carousel-item img {
    width: 100%;
    height: clamp(220px, 32vw, 420px);
    object-fit: cover;
    display: block;
}

/* Darken the lower half so overlay text stays readable on any photo. */
.home-slider .carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 36, 56, 0.15) 0%, rgba(16, 36, 56, 0.72) 100%);
    pointer-events: none;
}

.home-slider .slide-caption {
    position: absolute;
    right: 1rem;
    bottom: 0.75rem;
    z-index: 3;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.85rem;
    text-align: right;
    max-width: 45%;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.slider-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
    z-index: 2;
}

.slider-panel {
    max-width: 42rem;
    color: #fff;
    pointer-events: auto;
}

.slider-panel h1 {
    font-weight: 800;
    font-size: clamp(1.5rem, 3.4vw, 2.6rem);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    margin-bottom: 0.4rem;
}

.slider-panel .lead {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.home-slider .carousel-indicators {
    z-index: 4;
    margin-bottom: 0.6rem;
}

.home-slider .carousel-control-prev,
.home-slider .carousel-control-next {
    z-index: 4;
    width: 8%;
}

/* Respect a reader's motion preference: no sliding, no autoplay drift. */
@media (prefers-reduced-motion: reduce) {
    .home-slider .carousel-item {
        transition: none !important;
    }
}

/* ---- Announcement strip ---------------------------------------------- */
.announce-strip {
    background: var(--brand-accent);
    color: #fff;
    padding: 0.6rem 0;
    font-size: 0.925rem;
}

.announce-tag {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    background: rgba(0, 0, 0, 0.18);
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    white-space: nowrap;
}

/* Keep the strip thin however long the announcement is: show at most
   two lines and let the "More" link carry the rest. */
.announce-strip .announce-body {
    margin: 0;
    flex: 1 1 20rem;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

.announce-strip .announce-body p {
    margin: 0;
    display: inline;
}

.announce-strip a {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}

/* ---- Paired bands ---------------------------------------------------- */
.split-band .section-title {
    margin-bottom: 0.15rem;
}

/* ---- Principal's message --------------------------------------------- */
.principal-block {
    display: flow-root;
}

.principal-photo {
    float: left;
    width: 140px;
    height: 170px;
    object-fit: cover;
    border-radius: 0.5rem;
    margin: 0 1rem 0.5rem 0;
    background: var(--surface);
}

.principal-sign {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

/* ---- Notices panel beside the message -------------------------------- */
.notice-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    padding: 0 1rem;
    max-height: 26rem;
    overflow-y: auto;
}

/* A quiet scrollbar so the panel does not shout on Windows. */
.notice-panel::-webkit-scrollbar { width: 8px; }
.notice-panel::-webkit-scrollbar-thumb { background: #cfd6e0; border-radius: 4px; }
.notice-panel::-webkit-scrollbar-track { background: transparent; }

/* ---- News thumbnails in the paired band ------------------------------ */
.news-thumb {
    width: 76px;
    height: 60px;
    object-fit: cover;
    border-radius: 0.4rem;
    flex: 0 0 76px;
    background: var(--surface);
}

/* ---- Small screens --------------------------------------------------- */
@media (max-width: 767.98px) {
    /* Keep the announcement to a single compact line on phones. */
    .announce-strip { font-size: 0.85rem; }
    .announce-strip .announce-body { -webkit-line-clamp: 2; flex-basis: 100%; }
    .announce-strip .btn { display: none; }

    .home-slider .slide-caption {
        display: none;              /* the photo itself is the message */
    }

    .slider-panel h1 {
        font-size: 1.35rem;
    }

    .slider-panel .lead {
        font-size: 0.95rem;
    }

    .principal-photo {
        float: none;
        width: 110px;
        height: 132px;
        margin: 0 0 0.75rem 0;
    }

    /* Keep the cap on phones too. Without it the eight notices add nearly
       a thousand pixels to the page; the list still scrolls inside the
       panel and "All notices" reaches the full page. */
    .notice-panel {
        max-height: 20rem;
    }
}