/* NUST Library — look & feel reproduced from the Drupal 7 site */
:root {
  --nl-navy: #1b2550; --nl-navy-dark: #131a3d; --nl-navy-mid: #2b376c;
  --nl-link-muted: #7f8bb8; --nl-gold: #f5b400;
  --nl-text: #444; --nl-heading: #1b2550; --nl-line: #e2e2e2; --nl-zebra: #ececec; --nl-band: #efefef;
  --nl-font: "Ropa Soft Pro", "Fira Sans Condensed", "Ropa Sans", Arial, sans-serif;
}
body { margin: 0; font-family: var(--nl-font); font-size: 14px; line-height: 1.6; color: var(--nl-text); background: #fff; }
.nl-page .container { width: 100%; max-width: 1170px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
.nl-page img { max-width: 100%; height: auto; }
.nl-page a { color: var(--nl-navy); text-decoration: none; }
.nl-page a:hover { text-decoration: underline; }
.nl-page h1, .nl-page h2, .nl-page h3, .nl-page h4, .nl-page h5 { font-family: var(--nl-font); color: var(--nl-heading); font-weight: 500; line-height: 1.25; }

/* ---------- Top bar ---------- */
.nl-topbar { background: linear-gradient(180deg, #1d2756 0%, var(--nl-navy-dark) 100%); color: #fff; font-size: 12px; }
.nl-topbar .container { display: flex; align-items: center; justify-content: space-between; min-height: 32px; position: relative; }
.nl-topbar-left, .nl-topbar-left .block-content, .nl-topbar-left p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; }
.nl-topbar a, .nl-topbar span, .nl-topbar p { color: #fff !important; }
.nl-topbar .block-title { display: none; }
.nl-topbar .fa { margin-right: 4px; }
.nl-search-toggle { background: #8a8fa3; border: 0; color: #fff; width: 30px; height: 24px; cursor: pointer; border-radius: 2px; }
.nl-search-drop { display: none; position: absolute; right: 15px; top: 100%; z-index: 60; background: #fff; padding: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.15); min-width: 280px; }
.nl-search-drop .block-title { display: none; }
.nl-search-open .nl-search-drop { display: block; }
.nl-search-drop input[type="search"], .nl-search-drop input[type="text"] { width: 100%; padding: 6px 8px; border: 1px solid #ccc; box-sizing: border-box; }

/* ---------- Header ---------- */
.nl-header { background: #fff; border-bottom: 1px solid #ddd; box-shadow: 0 2px 4px rgba(0,0,0,.05); position: relative; z-index: 50; }
.nl-header .container { display: flex; align-items: stretch; justify-content: space-between; min-height: 78px; }
.nl-branding { display: flex; align-items: center; padding: 8px 0; }
.nl-branding img { max-height: 54px; width: auto; display: block; }
.nl-branding .block-title { display: none; }
.nl-nav { display: flex; align-items: stretch; }
.nl-nav .block, .nl-nav .region, .nl-nav .block-content { display: flex; align-items: stretch; height: 100%; }
.nl-nav .block-title { display: none; }
.nl-menu { list-style: none; margin: 0; padding: 0; }
.nl-nav .nl-menu:not(.nl-menu--sub) { display: flex; align-items: stretch; }
.nl-nav .nl-menu:not(.nl-menu--sub) > li { position: relative; display: flex; }
.nl-nav .nl-menu:not(.nl-menu--sub) > li > a { display: flex; align-items: center; padding: 0 15px; color: #555; font-size: 14px; border-bottom: 3px solid transparent; }
.nl-nav .nl-menu:not(.nl-menu--sub) > li > a:hover,
.nl-nav .nl-menu:not(.nl-menu--sub) > li.is-active-trail > a,
.nl-nav .nl-menu:not(.nl-menu--sub) > li > a.is-active { color: var(--nl-navy); font-weight: 600; border-bottom-color: var(--nl-navy); text-decoration: none; }
.nl-menu--sub { display: none; position: absolute; top: 100%; left: 0; min-width: 230px; background: #fff; border-top: 3px solid var(--nl-navy); box-shadow: 0 8px 20px rgba(0,0,0,.12); z-index: 70; }
.nl-menu--sub li { position: relative; }
.nl-menu--sub a { display: block; padding: 9px 16px; color: #555; font-size: 13px; border-bottom: 1px solid #eee; }
.nl-menu--sub a:hover { background: #f5f5f5; color: var(--nl-navy); text-decoration: none; }
.nl-menu--sub .nl-menu--sub { top: 0; left: 100%; border-top: 0; }
.nl-nav li:hover > .nl-menu--sub, .nl-nav li:focus-within > .nl-menu--sub { display: block; }
.nl-menu-toggle { display: none; background: none; border: 0; font-size: 22px; color: var(--nl-navy); cursor: pointer; }

/* ---------- Title band ---------- */
.nl-titlebar { background: var(--nl-band); border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; }
.nl-titlebar .container { padding-top: 16px; }
.nl-titlebar .block-title { display: none; }
.nl-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; font: italic 11px Georgia, "Times New Roman", serif; color: #555; }
.nl-breadcrumb li + li::before { content: "/"; padding: 0 5px; color: #777; }
.nl-breadcrumb a { color: var(--nl-navy); }
.nl-page-title { display: inline-block; margin: 14px 0 -1px !important; padding-bottom: 16px; font-size: 24px; color: #222 !important; border-bottom: 3px solid var(--nl-navy); }

/* ---------- Main ---------- */
.nl-main { padding: 40px 0 30px; }
.nl-row { display: flex; gap: 30px; align-items: flex-start; }
.nl-content { flex: 1 1 auto; min-width: 0; }
.nl-sidebar { flex: 0 0 270px; }
.nl-sidebar .block { margin-bottom: 30px; }
.nl-main h2 { font-size: 20px; margin: 24px 0 10px; }
.nl-main h3 { font-size: 18px; margin: 22px 0 8px; }
.nl-main h4 { font-size: 16px; }
.nl-main p { margin: 0 0 10px; }
.block-title { font-size: 22px; margin: 0 0 15px; color: var(--nl-heading); font-weight: 500; }

/* Rows: each D7 region becomes a row of columns (front page search / announcements / suggestion, cards, …) */
.nl-rows > .region { display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 30px; }
.nl-rows > .region > .block { flex: 1 1 260px; min-width: 0; }
.nl-hero > .region { gap: 0; margin: 0; }
.nl-hero > .region > .block { flex-basis: 100%; }
.nl-hero img { width: 100%; display: block; }
.nl-front .nl-content > .region-content { display: flex; flex-wrap: wrap; gap: 30px; }
.nl-front .nl-content > .region-content > .block { flex: 1 1 260px; min-width: 0; }
.nl-front .nl-content > .region-content > .block-system-main-block,
.nl-front .nl-content > .region-content > .block-system-messages-block,
.nl-front .nl-content > .region-content > .block-local-tasks-block { flex-basis: 100%; }
.nl-front .block-system-main-block .node__content:empty { display: none; }

/* Tables (staff lists etc.) */
.nl-main table { width: 100% !important; border-collapse: collapse; margin: 0 0 24px; font-size: 13px; border: 1px solid var(--nl-line); background: #fff; }
.nl-main table td, .nl-main table th { padding: 8px 6px; border-top: 1px solid var(--nl-line); text-align: left; vertical-align: middle; font-weight: 400; }
.nl-main table tr:nth-child(even) { background: var(--nl-zebra); }
.nl-main table p { margin: 0 0 4px; }

/* Forms / buttons */
.nl-main input[type="submit"], .nl-main .button { background: var(--nl-navy); color: #fff; border: 0; padding: 8px 18px; cursor: pointer; }
.nl-main input[type="text"], .nl-main input[type="search"], .nl-main input[type="email"], .nl-main select, .nl-main textarea { border: 1px solid #ccc; padding: 6px 8px; font-family: inherit; }

.nl-fullwidth iframe { width: 100%; display: block; border: 0; }

/* ---------- Footer ---------- */
.nl-footer { background: var(--nl-navy); color: #fff; padding: 50px 0 40px; position: relative; font-size: 12px; }
.nl-footer-grid { display: flex; flex-wrap: wrap; gap: 30px; }
.nl-footer-grid > .region { flex: 1 1 200px; display: flex; flex-wrap: wrap; gap: 30px; }
.nl-footer-grid > .region > .block { flex: 1 1 200px; min-width: 0; }
.nl-footer .block-title { color: #fff; font-size: 18px; position: relative; padding-bottom: 12px; margin-bottom: 30px; }
.nl-footer .block-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 70px; height: 2px; background: var(--nl-navy-mid); }
.nl-footer, .nl-footer p, .nl-footer li { color: #fff; }
.nl-footer a { color: var(--nl-link-muted); }
.nl-footer p { margin: 0 0 8px; }
.nl-footer ul { list-style: none; padding: 0; margin: 0; }
.nl-footer .nl-label { color: var(--nl-link-muted); font-size: 11px; text-transform: uppercase; margin: 0 0 6px; }
.nl-footer .nl-label + p a { color: #fff; }
.nl-social a { color: #fff !important; font-size: 20px; margin-right: 14px; }
.nl-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; border: 1px solid #fff; padding: 2px; }
.nl-gallery img { display: block; width: 100%; height: 40px; object-fit: cover; }
.nl-totop { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); width: 22px; height: 22px; background: var(--nl-navy-mid); color: #fff !important; display: flex; align-items: center; justify-content: center; font-size: 10px; z-index: 2; }
.nl-copyright { background: var(--nl-navy-dark); color: #fff; text-align: center; font-size: 11px; padding: 22px 0 18px; }
.nl-copyright .block-title { display: none; }
.nl-copyright p { margin: 0; color: #fff; }
.nl-copyright a { color: var(--nl-link-muted); }

/* ---------- Mobile ---------- */
@media (max-width: 991px) {
  .nl-header .container { flex-wrap: wrap; align-items: center; }
  .nl-menu-toggle { display: block; }
  .nl-nav { display: none; flex-basis: 100%; }
  .nl-menu-open .nl-nav { display: block; }
  .nl-nav .block, .nl-nav .region, .nl-nav .block-content { display: block; height: auto; }
  .nl-nav .nl-menu:not(.nl-menu--sub) { display: block; padding-bottom: 10px; }
  .nl-nav .nl-menu:not(.nl-menu--sub) > li { display: block; }
  .nl-nav .nl-menu:not(.nl-menu--sub) > li > a { padding: 10px 0; border-bottom: 1px solid #eee; }
  .nl-menu--sub { display: block; position: static; box-shadow: none; border-top: 0; padding-left: 15px; }
  .nl-row { flex-direction: column; }
  .nl-sidebar { flex-basis: auto; width: 100%; }
  .nl-main table { display: block; overflow-x: auto; }
}


/* ==== D7 shortcode parity (added 2026-10-30): [title], [tabs]/[tab], [video], [maps], [animate].
   Tab look comes from nust-modern.css (.nl-content .nav-tabs); only structure is set here. ==== */
.nl-title{margin:0 0 24px}
.nl-title h2{color:var(--nl-navy,#1d2758);margin:0 0 6px}
.nl-title .subtitle{color:var(--nl-muted,#5b6475);font-size:1.05em;margin:0}
.nl-tabs{margin:8px 0 28px}
.nl-tabs .tab-icon{margin-right:4px}
.nl-tabs .tab-content{border:1px solid var(--nl-line,#e2e6ee);border-top:0;border-radius:0 0 10px 10px;padding:24px;background:#fff}
.nl-tabs .tab-content>.tab-pane{display:none}
.nl-tabs .tab-content>.active{display:block}
.nl-video{position:relative;height:0;overflow:hidden;margin:10px 0 20px;border-radius:8px;background:#000}
.nl-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.nl-map{margin:10px 0 20px}
.nl-map iframe{width:100%;height:100%;border:0;border-radius:8px}
@media (max-width:767px){.nl-tabs .tab-content{padding:15px}}

/* ==== Rebuilt D7 views (added 2026-10-30): gallery, team, subject portals, library list.
   Note: the theme's original .nl-gallery rule (4-col footer strip) is reused for the footer mini gallery. ==== */
.views-element-container>.nl-gallery{display:block;border:0;padding:0}
.nl-gallery>.view-content-wrap,.nl-gallery>.view-content{display:grid;width:100%;float:none;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin:10px 0 30px}
.nl-gallery__item{margin:0;border-radius:8px;overflow:hidden;background:var(--nl-surface,#f3f5fa)}
.nl-gallery .nl-gallery__item img{display:block;width:100%;height:160px;object-fit:cover;transition:transform .25s ease}
.nl-gallery__item a:hover img,.nl-gallery__item a:focus img{transform:scale(1.04)}
.nl-gallery__caption{padding:8px 10px;font-size:13px;line-height:1.3;color:var(--nl-text,#1f2633)}
.nl-gallery--mini>.view-content-wrap,.nl-gallery--mini>.view-content{grid-template-columns:repeat(4,1fr);gap:2px;margin:0 0 10px;border:1px solid #fff;padding:2px}
.nl-gallery--mini .nl-gallery__item{border-radius:0;background:none}
.nl-gallery--mini .nl-gallery__item img{height:40px}
.nl-gallery--mini .more-link{margin-top:6px}
.nl-gallery--mini .more-link a{color:var(--nl-link-muted,#c9d3ea);font-size:13px}
.nl-team>.view-content-wrap,.nl-team>.view-content{display:grid;width:100%;float:none;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;margin:10px 0 30px}
.nl-team__item{text-align:center;padding:18px 12px;border:1px solid var(--nl-line,#e2e6ee);border-radius:10px;background:#fff}
.nl-team__item img{width:110px;height:110px;object-fit:cover;border-radius:50%;margin:0 auto 10px;display:block}
.nl-team__name{font-size:16px;margin:0 0 4px}
.nl-team__position{font-size:13px;color:var(--nl-muted,#5b6475)}
.nl-team__phone{font-size:13px;margin-top:4px}
.nl-subject-portals__list{list-style:none;margin:0 0 20px;padding:0}
.nl-subject-portals__list li{padding:7px 0;margin:0;line-height:1.4;font-size:14px;border-bottom:1px solid var(--nl-line,#e2e6ee)}
.nl-subject-portals__list li a{display:inline}
.nl-subject-portals__list li i.fa:not([class*="fa-"]){display:none}
.nl-subject-portals__list li .fa{width:18px;color:var(--nl-gold,#f6b11f);margin-right:6px;text-align:center}

/* Owl carousel dots (2026-10-30): gavias template.css (loaded twice, the second time after this file) styles .owl-dot while
   nust-modern.css styles its inner span; neutralise the button so only the span shows. "body" prefix beats template.css specificity. */
body .owl-carousel .owl-dots{display:flex;justify-content:center;align-items:center;gap:8px;float:none}
body .owl-carousel .owl-dots .owl-dot,body .owl-carousel .owl-dots .owl-dot.active,body .owl-carousel .owl-dots .owl-dot:hover{width:auto;height:auto;margin:0;padding:6px 0;background:none;border:0;border-radius:0;display:inline-flex;align-items:center}

/* Mobile (2026-11-02): below 992px .nl-row stacks into a column but kept align-items:flex-start,
   so each column took its content width (1170px) and ran off-screen. Stretch them to the screen. */
@media (max-width:991px){.nl-row{align-items:stretch}.nl-row>*{width:100%;max-width:100%;min-width:0}}