/* Basic site custom styles overriding/augmenting layui */
body {font-family: "Segoe UI", Arial, sans-serif; color:#2b2b2b; line-height:1.6; font-size:15px;}
h1, h2, h3, h4 {font-family: Georgia, "Times New Roman", serif; letter-spacing:.3px;}
h2 {font-weight:600;}
em.caps {font-variant:small-caps; letter-spacing:.5px;}
/* Skip link for accessibility */
.skip-link {position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip-link:focus {left:10px; top:10px; width:auto; height:auto; background:#1976d2; color:#fff; padding:8px 14px; border-radius:4px; z-index:10000; box-shadow:0 2px 6px rgba(0,0,0,.25);} 
nav.top-nav a:focus, .program-card a:focus, .media-card a:focus, .footer-cols a:focus {outline:2px solid #1976d2; outline-offset:2px;}
header.site-header {background:#101826; color:#fff;}
header .logo {font-size:22px; font-weight:600; letter-spacing:.5px; padding:14px 20px; display:flex; align-items:center;color: #ffffff;}
header .logo span {color:#4fc3f7;}
nav.top-nav {background:#142132;}
nav.top-nav a {color:#cfd8dc !important; font-size:14px;}
nav.top-nav a:hover, nav.top-nav a.active {color:#fff !important;}
/* Unified button color scheme to match navigation background */
.layui-btn, .layui-btn-normal, .layui-btn-primary {background:#142132 !important; border-color:#142132 !important; color:#ffffff !important;}
.layui-btn:hover {filter:brightness(1.08);} 
/* Dropdown (second-level) menu styling */
nav.top-nav dl.layui-nav-child {background:#1b2938; border:1px solid #223647; padding:6px 0; min-width:200px;}
nav.top-nav dl.layui-nav-child dd a {color:#fff !important; font-size:13px; padding:10px 18px;}
nav.top-nav dl.layui-nav-child dd a:hover {background:#24394f; color:#fff !important;}
footer.site-footer {background:#101826; color:#cfd8dc; padding:40px 0; margin-top:60px; font-size:14px;}
footer a {color:#90caf9;}
.hero {background:linear-gradient(135deg,#102a43,#0d3b66); color:#fff; padding:110px 0 90px; position:relative; overflow:hidden;}
.hero:after {content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.15),transparent 60%); pointer-events:none;} 
.hero > .layui-container {position:relative; z-index:1;}
.hero h1 {font-size:44px; font-weight:600; margin-bottom:18px;}
.hero p.lead {font-size:18px; max-width:760px; line-height:1.55;}
.hero .cta-group {margin-top:30px;}
.cta-group {display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
.cta-group .layui-btn {flex:1 1 0; display:inline-flex; justify-content:center;}
/* Ensure primary CTA text white */
.cta-group .layui-btn-primary {color:#fff !important;}
.section {padding:60px 0;}
.section.alt {background:#f7f9fb;}
.section h2 {font-size:30px; margin-bottom:25px; font-weight:600;}
.card-grid {display:grid; gap:28px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
.program-card {background:#fff; border:1px solid #e2e8f0; border-radius:8px; padding:22px; transition:.25s box-shadow,.25s transform;}
.program-card:hover {box-shadow:0 10px 28px -8px rgba(0,0,0,.15); transform:translateY(-4px);} 
.program-card h3 {margin-top:0; font-size:18px;}
.badge-line {display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.badge-line .layui-badge {background:#0d47a1;}
.stat-cards {display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:22px; margin-top:25px;}
.stat {background:#fff; border-radius:10px; padding:24px 20px; border:1px solid #e0e6ed; text-align:center;}
.stat h4 {margin:0 0 6px; font-size:34px; font-weight:600; color:#0d47a1;}
.stat span {font-size:13px; letter-spacing:.5px; text-transform:uppercase; color:#607d8b;}
.title-divider {height:3px; width:54px; background:#1976d2; border-radius:2px; margin:14px 0 30px;}
.breadcrumb-bar {background:#f1f5f9; padding:14px 0; font-size:13px;}
.page-hero {background:#102a43; color:#fff; padding:70px 0 60px;}
.page-hero h1 {margin:0; font-size:40px; font-weight:600;}
.subnav {margin:18px 0 34px;}
.subnav a {display:inline-block; margin:0 14px 10px 0; padding:8px 16px; background:#eceff1; border-radius:30px; font-size:13px; color:#2b3a42; transition:.25s background;}
.subnav a.active, .subnav a:hover {background:#1976d2; color:#fff;}
.two-col {display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:40px; align-items:start;}
.list-check {list-style:none; padding:0; margin:0;}
.list-check li {position:relative; padding-left:24px; margin-bottom:10px;}
.list-check li:before {content:"✔"; position:absolute; left:0; top:0; color:#1976d2; font-size:14px;}
blockquote.policy {background:#f5f8fa; border-left:4px solid #1976d2; padding:18px 22px; margin:24px 0; font-size:15px; line-height:1.55;}
.faq .layui-colla-title {font-size:15px;}
.book-grid {display:grid; gap:30px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); margin-top:25px;}
.book {border:1px solid #e2e8f0; border-radius:8px; padding:18px; background:#fff; display:flex; flex-direction:column;}
.book h3 {font-size:16px; margin:0 0 8px;}
.book .meta {font-size:12px; color:#607d8b; margin-bottom:10px;}
.book .tags {margin-top:auto; display:flex; flex-wrap:wrap; gap:6px;}
.news-list {list-style:none; margin:0; padding:0;}
.news-item {padding:18px 0; border-bottom:1px solid #e0e6ed;}
.news-item h3 {margin:0 0 6px; font-size:18px;}
.contact-cards {display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px; margin-top:20px;}
.contact-card {background:#fff; padding:20px 22px; border:1px solid #dde3eb; border-radius:10px;}
.contact-card h3 {margin:0 0 6px; font-size:16px;}
form.contact-form .layui-form-item label {font-weight:600;}
.footer-cols {display:grid; gap:40px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin-bottom:30px;}
.footer-cols h4 {margin:0 0 14px; font-size:15px; text-transform:uppercase; letter-spacing:.5px; color:#fff;}
.footer-cols ul {list-style:none; margin:0; padding:0;}
.footer-cols li {margin-bottom:8px;}
.footer-cols a {color:#cfd8dc; font-size:13px;}
.footer-bottom {border-top:1px solid #1f3042; padding-top:18px; font-size:12px; text-align:center;}
.hash-highlight {animation: hashFlash 2s ease-in-out; box-shadow:0 0 0 3px rgba(25,118,210,.35); border-radius:4px;}
@keyframes hashFlash {0%{background:#fffbe6;}50%{background:#e3f2fd;}100%{background:transparent;}}
@media (max-width: 992px){
  .hero h1 {font-size:36px;}
  .page-hero h1 {font-size:32px;}
  header.site-header {position:sticky; top:0; z-index:1000;}
  .nav-toggle {display:inline-flex; cursor:pointer; background:#1976d2; color:#fff; border:none; padding:10px 14px; border-radius:4px; font-size:14px; margin-left:12px;}
  header.site-header .layui-container {flex-wrap:wrap;}
  header.site-header .mobile-note {order:3; width:100%; margin:4px 0 0 0; text-align:left;}
  header.site-header .mobile-note {padding-left:20px;} /* align with logo text start */
  header.site-header #navToggle {order:2;}
  nav.top-nav {order:4; width:100%;}
  nav.top-nav {display:none;}
  nav.top-nav.open {display:block;}
  nav.top-nav .layui-nav {display:block;}
  nav.top-nav .layui-nav-item {display:block;}
  nav.top-nav dl.layui-nav-child {position:static; background:transparent; box-shadow:none;}
  /* Keep dark background for mobile dropdown as well */
  nav.top-nav.open dl.layui-nav-child {background:#1b2938; border:none; padding:0;}
  nav.top-nav.open dl.layui-nav-child dd a {padding:10px 20px;}
  nav.top-nav dl.layui-nav-child dd a {padding-left:28px;}
}
@media (min-width: 993px){
  .nav-toggle {display:none;}
}

/* Media / card layouts for books & news */
.media-grid {display:grid; gap:24px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.media-card {background:#fff; border:1px solid #e0e6ed; border-radius:10px; padding:16px 18px 20px; display:flex; flex-direction:column; position:relative; overflow:hidden; transition:box-shadow .25s, transform .25s;}
.media-card:hover {box-shadow:0 10px 26px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.06); transform:translateY(-3px);} 
.media-card .thumb {display:block; width:100%; aspect-ratio:16/10; position:relative; overflow:hidden; border-radius:8px; margin-bottom:12px; background:#eceff1; box-shadow:inset 0 0 0 1px #d0d7de;}
.media-card .thumb img {width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
.media-card:hover .thumb img {transform:scale(1.04);} 
.media-card .thumb .ph {position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:34px; color:#546e7a; letter-spacing:1px; font-family:system-ui,Segoe UI,Arial;}
.media-card h3 {margin:0 0 8px; font-size:18px; line-height:1.3;}
.media-card h3 a {color:#102a43; text-decoration:none;}
.media-card h3 a:hover {text-decoration:underline;}
.media-card p {margin:0 0 12px; font-size:13px; line-height:1.55; flex:1;}
.media-card .meta {font-size:12px; color:#607d8b; margin-bottom:10px;}
.media-card .tags {display:flex; flex-wrap:wrap;}
.media-card .tags span {margin:0 4px 4px 0;}

/* Pagination */
.pagination {display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:26px;}
.pagination button {border:1px solid #c5d0dc; background:#fff; padding:6px 12px; border-radius:4px; cursor:pointer; font-size:13px; line-height:1.2;}
.pagination button.active {background:#1976d2; color:#fff; border-color:#1976d2;}
.pagination button:disabled {opacity:.45; cursor:not-allowed;}

/* Book & News thumbnails */
/* Reworked thumbnails: large variant uses image */
.thumb.large {width:220px; height:300px; border-radius:14px; background:#eceff1; position:relative; overflow:hidden; display:block; box-shadow:inset 0 0 0 1px #d0d7de;}
.thumb.large img {width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease;}
.thumb.large .ph {position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:46px; font-weight:600; color:#607d8b;}
.detail-cover:hover .thumb.large img {transform:scale(1.05);} 

/* Detail pages */
.detail-layout {display:flex; flex-wrap:wrap; gap:40px; align-items:flex-start;}
.detail-cover {flex:0 0 auto;}
.detail-main {flex:1 1 320px; min-width:300px;}
.meta-list {list-style:none; padding:0; margin:14px 0 0; columns:2; column-gap:28px; font-size:13px;}
.meta-list li {break-inside:avoid; margin:4px 0;}
@media (max-width: 768px){
  .detail-layout {flex-direction:column;}
  .meta-list {columns:1;}
  .thumb.large {width:100%; height:260px;}
}